.zb { --zb-stark: var(--mz-info); --zb-schwach: var(--mz-danger); --zb-serif: 'Spectral', 'Iowan Old Style', Georgia, serif; --zb-mono: 'IBM Plex Mono', var(--mz-mono); --zb-measure: 68ch; max-width: 1180px; margin: 0 auto; padding: clamp(24px, 5vw, 64px) clamp(16px, 3vw, 32px) 96px; font-family: var(--zb-serif); font-size: clamp(17px, 0.3vw + 16px, 19px); line-height: 1.62; color: var(--mz-text); } .zb *, .zb *::before, .zb *::after { box-sizing: border-box; } .zb p { max-width: var(--zb-measure); margin: 0 0 1em; } .zb code { font-family: var(--zb-mono); font-size: .82em; padding: .05em .3em; border-radius: 3px; background: var(--mz-surface-alt); color: var(--mz-text-strong); } .zb a { color: var(--mz-text-strong); text-underline-offset: .18em; text-decoration-thickness: 1px; } .zb a:focus-visible, .zb summary:focus-visible { outline: 2px solid var(--mz-text-strong); outline-offset: 3px; border-radius: 2px; } .zb h1 { font-weight: 600; font-size: clamp(2.3rem, 4.6vw + .5rem, 4.1rem); line-height: 1.05; letter-spacing: -.012em; max-width: 17ch; margin: 0 0 .45em; color: var(--mz-text-strong); text-wrap: balance; } .zb .lead { font-size: 1.2em; line-height: 1.5; color: var(--mz-text-strong); max-width: 60ch; } .zb .stand { font-family: var(--zb-mono); font-size: .76em; line-height: 1.6; color: var(--mz-text-muted); max-width: 78ch; } .zb .mz-nav { margin: 1.6rem 0 0; } .zb h2 { font-weight: 600; font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.25rem); line-height: 1.15; margin: 3.6rem 0 .9rem; padding-top: 1.1rem; border-top: 1px solid var(--mz-border); color: var(--mz-text-strong); text-wrap: balance; } .zb h3 { font-weight: 600; font-size: 1.7rem; line-height: 1.2; margin: 3rem 0 .15rem; color: var(--mz-text-strong); scroll-margin-top: 1rem; } .zb h4.zb-grp { font: 500 .78rem/1.3 var(--zb-mono); letter-spacing: .01em; color: var(--mz-text-muted); margin: 1.5rem 0 .5rem; display: flex; align-items: center; gap: .55rem; } .zb h4.zb-grp::before { content: ''; width: .7rem; height: .7rem; background: var(--c); border-radius: 1px; } .zb .zb-grp--s { --c: var(--zb-stark); } .zb .zb-grp--w { --c: var(--zb-schwach); } .zb-figure { margin: 1.8rem 0 0; } .zb-legend { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font: .76rem/1.3 var(--zb-mono); color: var(--mz-text-muted); } .zb-legend li { display: flex; align-items: center; gap: .5rem; } .zb-legend .s-bg { fill: color-mix(in srgb, var(--zb-stark) 15%, var(--mz-surface)); } .zb-legend .s-edge { fill: var(--zb-stark); } .zb-legend .s-out { fill: none; stroke: var(--zb-stark); stroke-width: 1.5; } .zb-legend .w-bg { fill: color-mix(in srgb, var(--zb-schwach) 15%, var(--mz-surface)); } .zb-legend .w-edge { fill: var(--zb-schwach); } .zb-legend .w-out { fill: none; stroke: var(--zb-schwach); stroke-width: 1.5; } .zb-legend .h-bar { fill: var(--mz-text-muted); } .zb-scroll { overflow-x: auto; border: 1px solid var(--mz-border); border-radius: 6px; background: var(--mz-surface); padding: 18px 14px 10px; } .zb-hint { display: none; font: .74rem/1.4 var(--zb-mono); color: var(--mz-text-muted); margin: .5rem 0 0; } .zb-matrix { display: block; width: 100%; min-width: 1010px; height: auto; font-family: var(--zb-serif); } .zb-matrix .ax-name { font: 600 22px var(--zb-serif); fill: var(--mz-text-strong); } .zb-matrix .ax-sub, .zb-matrix .m-lab, .zb-matrix .band, .zb-matrix .mi, .zb-matrix .m-val { font-family: var(--zb-mono); } .zb-matrix .ax-sub, .zb-matrix .m-lab, .zb-matrix .band { font-size: 10.5px; fill: var(--mz-text-muted); } .zb-matrix .m-val { font-size: 11px; font-weight: 600; fill: var(--mz-text-strong); } .zb-matrix .m-bg { fill: var(--mz-border); } .zb-matrix .m-fg { fill: var(--mz-text-strong); } .zb-matrix .m-t { stroke: var(--mz-surface); stroke-width: 3; } .zb-matrix .slab rect { rx: 3px; } .zb-matrix .slab .edge { rx: 1.5px; } .zb-matrix .mid { stroke: var(--mz-text-muted); stroke-width: 1; } .zb-matrix a.slab { --c: var(--zb-stark); cursor: pointer; outline: none; } .zb-matrix a.slab.w { --c: var(--zb-schwach); } .zb-matrix .slab .bg { fill: color-mix(in srgb, var(--c) 15%, var(--mz-surface)); stroke: none; } .zb-matrix .slab .edge { fill: var(--c); } .zb-matrix .slab.e .bg { fill: none; stroke: var(--c); stroke-width: 1.5; } .zb-matrix .slab.e .edge { display: none; } .zb-matrix .slab .t { font: 600 13px var(--zb-serif); fill: var(--mz-text-strong); } .zb-matrix .slab .mi { font-size: 10px; fill: var(--mz-text-muted); } .zb-matrix a.slab:hover .bg, .zb-matrix a.slab:focus-visible .bg { stroke: var(--mz-text-strong); stroke-width: 1.6; } .zb figcaption { font-size: .86rem; line-height: 1.5; color: var(--mz-text-muted); max-width: 80ch; margin-top: .8rem; } .zb .mz-table-wrap { margin: 1.4rem 0 1rem; } .zb .mz-table { font-family: var(--zb-serif); font-size: .92rem; } .zb .mz-table td, .zb .mz-table th { vertical-align: top; } .zb .mz-table td.n { font-family: var(--zb-mono); white-space: nowrap; } .zb .zb-sum th, .zb .zb-sum td { border-top: 1px solid var(--mz-text-muted); font-weight: 600; } .zb-answer { margin: 2.2rem 0 0; padding: 1.1rem 1.3rem 1rem; border-left: 3px solid var(--mz-accent); background: var(--mz-surface); max-width: 74ch; } .zb-answer p { margin: 0 0 .6em; } .zb-answer p:last-child { margin: 0; } .zb-answer strong { color: var(--mz-text-strong); } .zb-scores { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font: .8rem/1.4 var(--zb-mono); color: var(--mz-text-muted); margin: .1rem 0 .6rem; } .zb-scores b { color: var(--mz-text-strong); font-weight: 600; } .zb-verdict { font-style: italic; font-size: 1.08em; color: var(--mz-text-strong); max-width: 62ch; } .zb-pair { display: grid; gap: 0 2.8rem; } @media (min-width: 980px) { .zb-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .zb-items { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: 1rem; } .zb-item { --c: var(--zb-stark); padding: .15rem 0 .2rem 1.1rem; border-left: 4px solid var(--c); scroll-margin-top: 1.5rem; } .zb-item--w { --c: var(--zb-schwach); } .zb-item--e { border-left-style: dotted; } .zb-item:target { background: color-mix(in srgb, var(--c) 11%, transparent); } .zb-item p { margin: 0 0 .35em; } .zb-itemhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .65rem; margin-bottom: .2rem; } .zb-itemhead strong { font-size: 1.06em; color: var(--mz-text-strong); } .zb-id { font: .74rem/1 var(--zb-mono); color: var(--mz-text-muted); } .zb-tag { font: 500 .66rem/1.5 var(--zb-mono); padding: 0 .45em; border: 1px solid var(--mz-border); border-radius: 3px; color: var(--mz-text-muted); white-space: nowrap; } .zb-tag--me { border-color: var(--mz-text-muted); } .zb-src { font: .74rem/1.45 var(--zb-mono); color: var(--mz-text-muted); } .zb-note { margin: 1.2rem 0 0; padding: .9rem 1.1rem; background: var(--mz-surface); border-radius: 4px; font-size: .95em; } .zb-note strong { color: var(--mz-text-strong); } .zb-rank { list-style: none; counter-reset: rank; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.5rem; } .zb-rank > li { counter-increment: rank; position: relative; padding-left: 3.4rem; } .zb-rank > li::before { content: counter(rank); position: absolute; left: 0; top: .05rem; width: 2.3rem; font: 600 1.8rem/1 var(--zb-serif); color: var(--mz-text-strong); text-align: right; } .zb-rank > li.glanz::before { color: var(--mz-accent); } .zb-rank h3 { font-size: 1.22rem; margin: 0 0 .2rem; line-height: 1.3; } .zb-rank .meta { font: .74rem/1.4 var(--zb-mono); color: var(--mz-text-muted); margin: 0 0 .4rem; } .zb-rank p { margin: 0 0 .5em; } .zb-gridwrap { margin: 1.4rem 0 0; } .zb-keys { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font: .74rem/1.3 var(--zb-mono); color: var(--mz-text-muted); } .zb-keys li { display: flex; align-items: center; gap: .45rem; } .zb-grid { display: grid; grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mz-border); border: 1px solid var(--mz-border); border-radius: 4px; overflow: hidden; } .zb-grid > * { background: var(--mz-surface); padding: .7rem .8rem; } .zb-grid .ch { font: 500 .74rem/1.3 var(--zb-mono); color: var(--mz-text-muted); background: var(--mz-surface-alt); } .zb-cell { display: flex; flex-direction: column; gap: .5rem; min-height: 5.4rem; } .zb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .zb-cell { position: relative; } .zb-chip { display: flex; gap: .55rem; align-items: baseline; font-size: .86rem; line-height: 1.3; color: var(--mz-text-strong); } .zb-chip b { flex: none; min-width: 1.35rem; text-align: center; font: 600 .7rem/1.5 var(--zb-mono); border-radius: 3px; border: 1px solid var(--mz-text-strong); } .zb-chip.a b { background: var(--mz-text-strong); color: var(--mz-bg); } .zb-chip.g b { background: var(--mz-accent); border-color: var(--mz-accent); color: var(--mz-bg); } .zb-chip.c b { background: transparent; } .zb-chip.n { color: var(--mz-text-muted); } .zb-chip.n b { border-color: var(--mz-border); color: var(--mz-text-muted); background: transparent; } .zb-key-b { font: 600 .7rem/1.5 var(--zb-mono); min-width: 1.35rem; text-align: center; border-radius: 3px; border: 1px solid var(--mz-text-strong); display: inline-block; } .zb-key-b.a { background: var(--mz-text-strong); color: var(--mz-bg); } .zb-key-b.g { background: var(--mz-accent); border-color: var(--mz-accent); color: var(--mz-bg); } .zb-key-b.n { border-color: var(--mz-border); color: var(--mz-text-muted); } .zb ul.zb-plain { max-width: var(--zb-measure); padding-left: 1.2rem; margin: 0 0 1em; } .zb ul.zb-plain li { margin: 0 0 .5em; } .zb .zb-sources { columns: 2 22rem; column-gap: 2rem; font-size: .9rem; line-height: 1.5; padding-left: 1.1rem; margin: .6rem 0 0; } .zb .zb-sources li { break-inside: avoid; margin-bottom: .35em; } .zb .mz-footer { margin-top: 4rem; } @media (max-width: 760px) { .zb-hint { display: block; } .zb .mz-table td:last-child { min-width: 15rem; } .zb-grid { grid-template-columns: 1fr; } .zb-grid .ch { display: none; } .zb-grid .rowh { background: var(--mz-surface-alt); } .zb-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font: .68rem/1.2 var(--zb-mono); color: var(--mz-text-muted); } .zb-rank > li { padding-left: 2.4rem; } .zb-rank > li::before { width: 1.6rem; font-size: 1.4rem; } } @media print { .zb-scroll { overflow: visible; } .zb-matrix { min-width: 0; } }