.viz-page {
--viz-ink-3: var(--dst-ink-3);
}
.viz-masthead-title a {
color: inherit;
text-decoration: none;
}
.viz-masthead-title a:hover {
color: var(--color-primary);
}
.viz-view {
scroll-margin-top: var(--scroll-offset);
}
@media (width <= 768px) {
.viz-view {
scroll-margin-top: 0;
}
}
.viz-stage:has(.viz-view:not([hidden])) {
margin-block-end: var(--space-xl);
}
.viz-view-head {
margin-block-end: var(--space-md);
}
.viz-view-title {
font-family: var(--font-title-serif);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: -0.01em;
color: var(--color-text);
margin: 0;
}
.viz-view-title:focus {
outline: none;
box-shadow: none;
}
.viz-view-dek {
margin: var(--space-xs) 0 0;
font-size: var(--font-size-md);
color: var(--color-text-muted);
}
.viz-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm) var(--space-lg);
margin-block-end: var(--space-md);
}
.viz-controls:empty {
display: none;
}
:root[data-js] .viz-view:not(.is-ready) :is(.viz-figure, .viz-extra, .viz-explain),
:root[data-js] .viz-view:not(.is-ready) .viz-controls > :not(.viz-loading) {
visibility: hidden;
}
:root[data-js] .viz-view:not(.is-failed) .viz-poster {
display: none;
}
.viz-loading {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: 36px;
color: var(--viz-ink-3);
}
.viz-control {
display: flex;
flex-wrap: wrap;
align-items: center;
max-inline-size: 100%;
gap: var(--space-xs) var(--space-sm);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.viz-control-label {
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--viz-ink-3);
}
.viz-input,
.viz-select {
font: inherit;
font-size: var(--font-size-sm);
block-size: 36px;
padding-inline: var(--space-sm);
min-inline-size: 0;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.viz-input {
inline-size: 13em;
max-inline-size: 100%;
}
.viz-select {
flex: 0 1 auto;
max-inline-size: 100%;
}
.viz-input:focus-visible,
.viz-select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.viz-input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.viz-check {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-block-size: 36px;
cursor: pointer;
color: var(--color-text-muted);
}
.viz-check input {
appearance: none;
flex: none;
inline-size: 16px;
block-size: 16px;
margin: 0;
border: 1.5px solid var(--color-border);
border-radius: 4px;
background: var(--color-surface);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.viz-check input:checked {
border-color: var(--color-primary);
background: var(--color-primary);
}
.viz-check input::before {
content: "";
display: block;
inline-size: 100%;
block-size: 100%;
background: var(--color-primary-contrast);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
opacity: 0;
}
.viz-check input:checked::before {
opacity: 1;
}
.viz-check input:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.viz-icon {
inline-size: 1.1rem;
block-size: 1.1rem;
vertical-align: -0.2em;
margin-inline-end: var(--space-2xs);
}
.viz-figure {
margin: 0;
}
.viz-box {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(135deg, var(--color-bg-start), var(--color-bg-end));
border: 1px solid var(--dst-rule);
border-radius: var(--radius-md);
}
.viz-view[data-shape="square"] .viz-box {
aspect-ratio: 16 / 11;
}
@media (width <= 640px) {
.viz-view[data-shape="round"] .viz-box,
.viz-view[data-shape="square"] .viz-box {
aspect-ratio: 1;
}
}
.viz-poster,
.viz-box canvas {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
}
.viz-poster {
object-fit: cover;
transition: opacity var(--transition-fast);
}
.viz-box.is-live .viz-poster {
opacity: 0;
}
.viz-box canvas {
touch-action: manipulation;
}
.viz-stills {
position: absolute;
inset: 0;
}
.viz-still {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.viz-poster--dark,
.dark-mode .viz-poster--light {
display: none;
}
.dark-mode .viz-poster--dark {
display: block;
}
.viz-status {
position: absolute;
inset-block-end: var(--space-sm);
inset-inline-start: var(--space-sm);
margin: 0;
padding: var(--space-2xs) var(--space-sm);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
background: var(--color-surface);
border-radius: var(--radius-sm);
}
.viz-status:empty {
display: none;
}
.viz-busy {
position: absolute;
inset: 0;
z-index: 2;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-bg-start) 60%, transparent);
}
.viz-box.is-loading .viz-busy {
display: flex;
}
.viz-spinner {
inline-size: 28px;
block-size: 28px;
border: 2.5px solid var(--color-border);
border-block-start-color: var(--color-primary);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.viz-spinner {
animation-duration: 2.4s;
}
}
.viz-tip {
position: absolute;
z-index: 1;
max-inline-size: min(18rem, 80%);
padding: var(--space-xs) var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: var(--leading-snug);
color: var(--color-text);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
pointer-events: none;
}
.viz-tip.is-pinned {
pointer-events: auto;
}
.viz-tip strong {
font-weight: var(--font-weight-medium);
}
.viz-tip a {
color: var(--color-primary);
}
.viz-tip.is-pinned a {
display: inline-block;
padding-block: 3px;
}
.viz-readout {
margin-block-start: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
min-block-size: 1.5em;
}
.viz-readout strong {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.viz-extra:empty {
display: none;
}
.viz-extra {
margin-block-start: var(--space-md);
}
.viz-list {
columns: 3 14rem;
column-gap: var(--space-lg);
margin: var(--space-xs) 0 0;
padding: 0;
list-style: none;
font-size: var(--font-size-sm);
}
.viz-list li {
break-inside: avoid;
padding-block: var(--space-2xs);
}
.viz-list a {
color: var(--color-primary);
text-decoration: none;
}
.viz-list a:hover {
text-decoration: underline;
}
.viz-list li[aria-current] a {
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.viz-list li[aria-current] a::before {
content: "";
display: inline-block;
inline-size: 0.45em;
block-size: 0.45em;
margin-inline-end: var(--space-xs);
vertical-align: 0.15em;
border-radius: 50%;
background: var(--color-accent);
}
.viz-path {
margin: 0 0 var(--space-md);
font-size: var(--font-size-sm);
line-height: var(--leading-relaxed);
color: var(--viz-ink-3);
}
.viz-path .viz-control-label {
margin-inline-end: var(--space-xs);
}
.viz-path a {
color: var(--color-primary);
text-decoration: none;
}
.viz-path a:hover {
text-decoration: underline;
}
.viz-path strong {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.viz-list .viz-n {
margin-inline-start: var(--space-xs);
color: var(--viz-ink-3);
font-variant-numeric: tabular-nums;
}
.viz-explain {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: var(--space-md) var(--space-xl);
margin-block-start: var(--space-xl);
padding-block-start: var(--space-lg);
border-block-start: 1px solid var(--dst-seam);
}
.viz-explain-head {
margin: 0 0 var(--space-xs);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.viz-explain-part p {
margin: 0 0 var(--space-sm);
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
}
.viz-explain-part a {
color: var(--color-primary);
}
.viz-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: var(--space-lg) var(--space-md);
margin: 0;
padding: 0;
list-style: none;
}
.viz-slot {
grid-column: 1 / -1;
margin-block-end: var(--space-md);
}
.viz-card {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
color: inherit;
text-decoration: none;
}
.viz-card-img {
display: block;
aspect-ratio: 16 / 9;
margin-block-end: var(--space-xs);
overflow: hidden;
background: linear-gradient(135deg, var(--color-bg-start), var(--color-bg-end));
border: 1px solid var(--dst-rule);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast);
}
.viz-thumb {
display: block;
inline-size: 100%;
block-size: 100%;
}
.viz-thumb--dark,
.dark-mode .viz-thumb--light {
display: none;
}
.dark-mode .viz-thumb--dark {
display: block;
}
.viz-card-title {
font-family: var(--font-title-serif);
font-size: var(--font-size-xl);
font-weight: 600;
line-height: var(--leading-snug);
color: var(--color-text);
}
.viz-card-dek {
font-size: var(--font-size-sm);
line-height: var(--leading-snug);
color: var(--color-text-muted);
}
.viz-card:hover .viz-card-img {
border-color: var(--color-primary);
}
.viz-card:hover .viz-card-title {
color: var(--color-primary);
}
.viz-card:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-md);
}
.viz-card[aria-current="page"] .viz-card-img {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent);
}