about/static/css/plugin-neofetch.css

.neofetch-section h3{margin:0}

.machine-buttons{
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0px 0 14px;
    flex-wrap: wrap
}
.machine-btn{
    padding:8px 14px;border:none;border-radius:12px;background:var(--paper);color:var(--ink);
    font-size:13px;font-weight:700;cursor:pointer;
    transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
    text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    box-shadow:inset 0 0 0 1px var(--edge-0)
}
.machine-btn:hover{background:var(--bg-3);transform:translateY(-1px)}
.machine-btn[data-active="true"],.machine-btn.active{
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

.neofetch-outputs{margin-top:4px}
.neofetch-output{display:none}
.neofetch-output:first-child{display:block}

.terminal{
    --neo-scale: 1;
    background: #0c0c0c;
    border-radius:12px;
    color: #cccccc;
    /* Reduced shadow blur and complexity */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 4px 12px rgba(0, 0, 0, .5);
    overflow:hidden;
    width:100%;
    position:relative;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    will-change: height;
}

.terminal::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,
    transparent 0%,
    rgba(122,162,255,.2) 50%,
    transparent 100%);
    opacity:.6;
}

.terminal-header{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: #1a1a1a;
}

.terminal-header .light{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow:0 0 4px currentColor, inset 0 1px 2px rgba(255,255,255,.3);
    position:relative;
}

.terminal-header .light::after{
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent);
}

.terminal-header .light.red {
    background: #ff5f56;
    color: #ff5f56
}

.terminal-header .light.yellow {
    background: #ffbd2e;
    color: #ffbd2e
}

.terminal-header .light.green {
    background: #27c93f;
    color: #27c93f
}

.terminal-body{
    position: relative;
    padding: 16px;
    overflow: auto;
    background: #0c0c0c;
}

.terminal-body::before{
    content:'';position:absolute;inset:0;
    background:
            radial-gradient(ellipse at top, rgba(122,162,255,.03), transparent 60%),
            radial-gradient(ellipse at bottom, rgba(182,146,255,.02), transparent 60%);
    pointer-events:none;
}

.neofetch-pre{
    margin: 0;
    white-space: pre;
    overflow: visible;
    word-wrap: normal;
    overflow-wrap: normal;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', var(--mono), sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #cccccc;
    transform-origin: left top;
    transform: scale(var(--neo-scale));
    position: relative;
    z-index: 1;
    will-change: transform;
}

.color-palette{
    margin-top: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    background: #1a1a1a;
    border-radius:8px;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.color-block{
    width: 28px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow:
            inset 0 1px 2px rgba(255,255,255,.1),
            0 1px 3px rgba(0, 0, 0, .4);
    flex-shrink:0;
    position:relative;
    overflow:hidden;
}
.color-block::after{
    content: '';
    position: absolute;
    inset: 0;
    background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 50%);
}

@media (max-width:1400px){ .neofetch-pre{font-size:11px} }
@media (max-width:1200px){ .neofetch-pre{font-size:10.5px} }
@media (max-width:900px) { .neofetch-pre{font-size:10px} }
@media (max-width:680px) {
    .neofetch-pre{font-size:9.5px}
    .machine-btn{padding:6px 10px;font-size:12px}
    .color-block{width:24px;height:16px}
}
@media (max-width:420px){
    .neofetch-pre{font-size:9px;line-height:1.22}
    .color-block{width:20px;height:14px}
}

.plugin--expanded .neofetch-pre{transform:scale(1);font-size:13.5px}