css-example.css

[class],
[class]::before,
[class]::after { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; }
.h1 { font-size: 24px; }
.h2 { font-size: 20px; }
.mark {
    padding: 4px 8px;
    border-radius: 4px;
    font: 700 20px monospace;
    letter-spacing: -0.04em;
}
.hr { margin: 2em 0; }
.sup { color: #767676; }
.details { margin: 1em 0; }
.summary::marker { content: '🔥 '; }
.spec {
    grid: auto / minmax(min-content, max-content) minmax(max-content, 1fr);
    max-width: 100%;
    padding: 16px;
    border-radius: 4px;
    background: #def;
    overflow-x: auto;
}
@media (max-width: 690px) {
    .spec { display: grid; }
}
@media (min-width: 691px) {
    .spec { display: inline-grid; }
}
.initial { color: blue; }
.spec__term { font-weight: 700; }
.spec__def { white-space: nowrap; }
.list {
    display: flex;
    flex-flow: wrap;
    gap: 0 16px;
    list-style: none;
    padding-left: 0;
    font: 16px monospace;
    overflow-x: auto;
}
.list__item {
    display: flex;
    align-items: center;
}
.list__input {
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 8px;
}
.list__label {
    display: inline-flex;
    flex: 1;
    padding: 4px 4px 4px 32px;
    margin-left: -32px;
    border-radius: 4px;
    letter-spacing: -0.04em;
    font-size: 16px;
}
:checked + .list__label {
    background: yellow;
    font-weight: 700;
}
.fieldset {
    display: inline-block;
    margin-bottom: 1em;
    border: 1px dashed #767676;
    border-radius: 4px;
}
.legend { font-weight: 700; }
.demo { overflow-x: auto; }
.item { transition: .2s; }
.declaration::before { content: '{ '; }
.declaration::after { content: ' }'; }
.pre { width: 100%; }
.code {
    overflow-x: auto;
    border-radius: 4px;
    font-size: 16px;
    letter-spacing: -0.04em;
}
.code--inline {
    background: #ddd;
    padding: 4px;
}
.code--block {
    display: block;
    background: #222;
    color: #fff;
    padding: 16px;
}
.code--eq { color: yellow; }