.playground {
margin: 2rem 0 0;
}
.playground h2 {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0.3rem;
}
.playground-desc {
font-family: var(--body);
font-size: 0.92rem;
color: var(--ash);
margin: 0 0 1rem;
}
.playground-desc code {
font-size: 0.82em;
}
.playground-terminal {
background: var(--slab);
border: 1px solid var(--ridge);
border-radius: 2px;
padding: 0;
position: relative;
overflow: hidden;
}
.playground-terminal .xterm {
padding: 0.75rem;
}
.playground-terminal .xterm-viewport {
overflow-y: auto !important;
}
.playground-terminal .xterm-viewport::-webkit-scrollbar {
width: 6px;
}
.playground-terminal .xterm-viewport::-webkit-scrollbar-track {
background: transparent;
}
.playground-terminal .xterm-viewport::-webkit-scrollbar-thumb {
background: var(--steel);
border-radius: 3px;
}
.playground-mode-toggle {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--flint);
background: var(--plate);
border: 1px solid var(--ridge);
border-radius: 2px;
padding: 0.2rem 0.5rem;
cursor: pointer;
line-height: 1;
transition:
color 0.15s,
border-color 0.15s;
}
.playground-mode-toggle:hover {
color: var(--accent);
border-color: var(--accent);
}
.playground-mode-toggle.vi {
color: var(--accent);
border-color: var(--accent-mid);
}
.playground-pinned-cmd {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
background: var(--slab);
font-family: "JetBrains Mono", monospace;
font-size: 14px;
padding: 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--ridge);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.playground-pinned-cmd .pinned-prompt {
color: var(--accent);
font-weight: bold;
}
.playground-pinned-cmd .pinned-dollar {
color: var(--flint);
}
.playground-pinned-cmd .pinned-text {
color: var(--chalk);
}
@media (max-width: 640px) {
.playground-terminal .xterm {
padding: 0.5rem;
}
.playground-mode-toggle {
font-size: 0.6rem;
padding: 0.15rem 0.35rem;
}
}