.term {
    --term-bg: #05060a;
    --term-fg: #c9d3e0;
    --term-hi: #eaf2ff;
    --term-dim: #6b7684;
    --term-red: #ff5f56;
    --term-green: #5ce68a;
    --term-blue: #7cb7ff;
    --term-yellow: #e8c15a;
    --term-magenta: #c56cff;

    --term-font: "Alpha Sector", "Pixel CN", "PingFang SC", "Microsoft YaHei", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --term-fs: clamp(11px, 0.83vw, 14.5px);
    --term-lh: 1.62;
    --term-pad-x: clamp(16px, 1.9vw, 34px);
    --term-pad-y: clamp(12px, 1.6vh, 22px);
    --term-gap-top: 0px;

    --term-frame-gap: clamp(8px, 1.1vh, 16px);
    --term-frame-top: calc(8.224% + var(--term-frame-gap));
    --term-frame-right: calc(5.455% + var(--term-frame-gap));
    --term-frame-bottom: calc(8.553% + var(--term-frame-gap));
    --term-frame-left: calc(3.636% + var(--term-frame-gap));
    --term-radius: clamp(14px, 1.3vw, 26px);
    position: absolute;
    inset: var(--term-frame-top) var(--term-frame-right) var(--term-frame-bottom) var(--term-frame-left);
    border-radius: var(--term-radius);
    overflow: hidden;
    background: var(--term-bg);
    color: var(--term-fg);
    font-family: var(--term-font);
    font-size: var(--term-fs);
    line-height: var(--term-lh);
    -webkit-font-smoothing: antialiased;
}

.term::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.028) 0 1px,
            rgba(0, 0, 0, 0) 1px 3px);
    z-index: 4;
}

.term-stage {
    position: absolute;
    inset: 0;
}

.term.is-fitted {
    inset: 0;
    border-radius: 0;
}

.term.is-fitted .term-screen {
    inset: calc(var(--term-inset-top, 0px) + var(--term-pad-y) + var(--term-gap-top, 0px))
           calc(var(--term-inset-right, 0px) + var(--term-pad-x))
           calc(var(--term-inset-bottom, 0px) + var(--term-pad-y))
           calc(var(--term-inset-left, 0px) + var(--term-pad-x));
}

.term-screen {
    position: absolute;
    inset: calc(var(--term-pad-y) + var(--term-gap-top, 0px)) var(--term-pad-x) var(--term-pad-y);
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 211, 224, 0.22) transparent;
    user-select: text;
    -webkit-user-select: text;
    z-index: 2;
    cursor: text;
}

.term-screen::-webkit-scrollbar {
    width: 8px;
}

.term-screen::-webkit-scrollbar-thumb {
    background: rgba(201, 211, 224, 0.2);
    border-radius: 4px;
}

.t-ln {
    min-height: 1em;
}

.c-dim { color: var(--term-dim); }
.c-hi { color: var(--term-hi); }
.c-err, .t-ln.is-err { color: var(--term-red); }
.c-ok { color: var(--term-green); }
.c-path { color: var(--term-blue); }
.c-warn { color: var(--term-yellow); }
.c-mag { color: var(--term-magenta); }
.c-num { color: var(--term-blue); }
.t-ln.is-dim { color: var(--term-dim); }
.t-ln.is-hi { color: var(--term-hi); }

.t-prompt { color: var(--term-green); }
.t-caret {
    display: inline-block;
    width: 0.62em;
    margin-left: 1px;
    background: var(--term-fg);
    color: transparent;
    animation: term-blink 1.06s steps(1, end) infinite;
}
.t-caret.is-off { animation: none; opacity: 0.25; }

@keyframes term-blink {
    0%, 52% { opacity: 1; }
    53%, 100% { opacity: 0; }
}

.term-tear {
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    top: 40%;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    background:
        linear-gradient(90deg,
            rgba(255, 95, 86, 0.30) 0 12%,
            rgba(0, 0, 0, 0.55) 12% 46%,
            rgba(197, 108, 255, 0.28) 46% 74%,
            rgba(0, 0, 0, 0.5) 74% 100%);
}

.term-tear.is-on {
    animation: term-tear 0.42s steps(3, end) 1;
}

@keyframes term-tear {
    0% { opacity: 0; transform: translateX(0) scaleY(1); }
    22% { opacity: 0.9; transform: translateX(-9px) scaleY(1); }
    48% { opacity: 0.55; transform: translateX(7px) scaleY(1.6); }
    74% { opacity: 0.75; transform: translateX(-3px) scaleY(1); }
    100% { opacity: 0; transform: translateX(0) scaleY(1); }
}

.term-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 26vh;
    top: -26vh;
    pointer-events: none;
    opacity: 0.5;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(124, 183, 255, 0) 0%, rgba(124, 183, 255, 0.055) 70%, rgba(124, 183, 255, 0.10) 100%);
    animation: term-scan 7.5s linear infinite;
}

@keyframes term-scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(160vh); }
}

.term.is-glitching .term-screen {
    text-shadow: 1.2px 0 rgba(255, 95, 86, 0.42), -1.2px 0 rgba(90, 200, 255, 0.38);
    animation: term-shake 0.16s steps(2, end) 2;
}

@keyframes term-shake {
    0% { transform: translateX(0); }
    50% { transform: translateX(-1.5px); }
    100% { transform: translateX(1px); }
}

.term.is-unstable {
    animation: term-instability 6.4s steps(1, end) infinite;
}

@keyframes term-instability {
    0%, 93% { filter: none; }
    93.4% { filter: brightness(0.62) contrast(1.3); }
    94% { filter: none; }
    97.2% { filter: brightness(1.25) saturate(0.6); }
    97.7% { filter: none; }
}


.term-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .term-scan, .term.is-unstable { animation: none; }
    .term-scan { opacity: 0.18; }
}
