.tg-brut {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: "Courier New", ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #f0eeff;
user-select: none;
}
.tg-brut-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-brut-track {
/* Outer 60×28; with 2px border, inner space is 56×24. Thumb is a
24×24 white block that slides inside that inner space. Track
stays dark in both states — the thumb's position is the signal,
not a color inversion, so the state is readable at a glance even
in a static preview. */
position: relative;
width: 60px;
height: 28px;
background: #1a1a1a;
border: 2px solid #f0eeff;
border-radius: 0;
transition: background 0.1s linear;
box-sizing: border-box;
}
.tg-brut-thumb {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 100%;
background: #f0eeff;
border-radius: 0;
transition: left 0.1s linear;
}
.tg-brut-input:checked ~ .tg-brut-track .tg-brut-thumb {
/* Inner width is 56px, thumb width 24px → 32px is the rightmost
position that keeps the thumb fully inside the border. The track
stays dark in both states — the thumb's position is the only
state signal. Pure brutalist: stark contrast, no decoration. */
left: 32px;
}
.tg-brut-input:focus-visible ~ .tg-brut-track {
outline: 2px solid #ff6c8a;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.tg-brut-track,
.tg-brut-thumb { transition: none; }
}