|
|
|
:root { |
|
--monospace: |
|
Menlo, |
|
Consolas, |
|
monospace; |
|
--monospace-font: 14px/1.5 var(--monospace); |
|
--serif: |
|
"Source Serif Pro", |
|
"Iowan Old Style", |
|
"Apple Garamond", |
|
"Palatino Linotype", |
|
"Times New Roman", |
|
"Droid Serif", |
|
Times, |
|
serif, |
|
"Apple Color Emoji", |
|
"Segoe UI Emoji", |
|
"Segoe UI Symbol"; |
|
--sans-serif: |
|
-apple-system, |
|
BlinkMacSystemFont, |
|
"avenir next", |
|
avenir, |
|
helvetica, |
|
"helvetica neue", |
|
ubuntu, |
|
roboto, |
|
noto, |
|
"segoe ui", |
|
arial, |
|
sans-serif; |
|
--theme-blue: #4269d0; |
|
--theme-green: #3ca951; |
|
--theme-red: #ff725c; |
|
--theme-yellow: #efb118; |
|
} |
|
html { |
|
-webkit-text-size-adjust: 100%; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
background: var(--theme-background); |
|
color: var(--theme-foreground); |
|
} |
|
body { |
|
font: 17px/1.5 var(--serif); |
|
margin: 0; |
|
} |
|
a[href] { |
|
color: var(--theme-foreground-focus); |
|
} |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
color: var(--theme-foreground-alt); |
|
font-weight: 700; |
|
line-height: 1.15; |
|
margin-top: 0; |
|
margin-bottom: 0.25rem; |
|
scroll-margin-top: 1rem; |
|
} |
|
h2 + p, |
|
h3 + p, |
|
h4 + p, |
|
h2 + table, |
|
h3 + table, |
|
h4 + table { |
|
margin-top: 0; |
|
} |
|
h1 + h2 { |
|
color: var(--theme-foreground); |
|
font-size: 20px; |
|
font-style: italic; |
|
font-weight: normal; |
|
margin-bottom: 1rem; |
|
} |
|
a[href] { |
|
text-decoration: none; |
|
} |
|
a[href]:hover, |
|
a[href]:focus { |
|
text-decoration: underline; |
|
} |
|
h1 code, |
|
h2 code, |
|
h3 code, |
|
h4 code, |
|
h5 code, |
|
h6 code { |
|
font-size: 90%; |
|
} |
|
pre { |
|
line-height: 1.5; |
|
} |
|
pre, |
|
code, |
|
tt { |
|
font-family: var(--monospace); |
|
font-size: 14px; |
|
} |
|
img { |
|
max-width: calc(100vw - 28px); |
|
} |
|
p, |
|
table, |
|
figure, |
|
figcaption, |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6, |
|
.katex-display { |
|
max-width: 640px; |
|
} |
|
blockquote, |
|
ol, |
|
ul { |
|
max-width: 600px; |
|
} |
|
blockquote { |
|
margin: 1rem 1.5rem; |
|
} |
|
ul ol { |
|
padding-left: 28px; |
|
} |
|
hr { |
|
height: 1px; |
|
margin: 1rem 0; |
|
padding: 1rem 0; |
|
border: none; |
|
background: |
|
no-repeat center/100% 1px linear-gradient( |
|
to right, |
|
var(--theme-foreground-faintest), |
|
var(--theme-foreground-faintest)); |
|
} |
|
pre { |
|
background-color: var(--theme-background-alt); |
|
border-radius: 4px; |
|
margin: 1rem -1rem; |
|
max-width: 960px; |
|
min-height: 1.5em; |
|
padding: 0.5rem 1rem; |
|
overflow-x: auto; |
|
box-sizing: border-box; |
|
} |
|
input:not([type]), |
|
input[type=email], |
|
input[type=number], |
|
input[type=password], |
|
input[type=range], |
|
input[type=search], |
|
input[type=tel], |
|
input[type=text], |
|
input[type=url] { |
|
width: 240px; |
|
} |
|
input, |
|
canvas, |
|
button { |
|
vertical-align: middle; |
|
} |
|
button, |
|
input, |
|
textarea { |
|
accent-color: var(--theme-blue); |
|
} |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
font: 13px/1.2 var(--sans-serif); |
|
} |
|
table pre, |
|
table code, |
|
table tt { |
|
font-size: inherit; |
|
line-height: inherit; |
|
} |
|
th > pre:only-child, |
|
td > pre:only-child { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
th { |
|
color: var(--theme-foreground); |
|
text-align: left; |
|
vertical-align: bottom; |
|
} |
|
td { |
|
color: var(--theme-foreground-alt); |
|
vertical-align: top; |
|
} |
|
th, |
|
td { |
|
padding: 3px 6.5px 3px 0; |
|
} |
|
th:last-child, |
|
td:last-child { |
|
padding-right: 0; |
|
} |
|
tr:not(:last-child) { |
|
border-bottom: solid 1px var(--theme-foreground-faintest); |
|
} |
|
thead tr { |
|
border-bottom: solid 1px var(--theme-foreground-fainter); |
|
} |
|
figure, |
|
table { |
|
margin: 1rem 0; |
|
} |
|
figure img { |
|
max-width: 100%; |
|
} |
|
figure > h2, |
|
figure > h3 { |
|
font-family: var(--sans-serif); |
|
} |
|
figure > h2 { |
|
font-size: 20px; |
|
} |
|
figure > h3 { |
|
font-size: 16px; |
|
font-weight: normal; |
|
} |
|
figcaption { |
|
font: small var(--sans-serif); |
|
color: var(--theme-foreground-muted); |
|
} |
|
a[href].observablehq-header-anchor { |
|
color: inherit; |
|
} |
|
:root { |
|
--font-big: 700 32px/1 var(--sans-serif); |
|
--font-small: 14px var(--sans-serif); |
|
} |
|
.big { |
|
font: var(--font-big); |
|
} |
|
.small { |
|
font: var(--font-small); |
|
} |
|
.red { |
|
color: var(--theme-red); |
|
} |
|
.yellow { |
|
color: var(--theme-yellow); |
|
} |
|
.green { |
|
color: var(--theme-green); |
|
} |
|
.blue { |
|
color: var(--theme-blue); |
|
} |
|
.muted { |
|
color: var(--theme-foreground-muted); |
|
} |
|
|
|
|
|
:root { |
|
--theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); |
|
--theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E"); |
|
--theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E"); |
|
} |
|
#observablehq-main, |
|
#observablehq-header, |
|
#observablehq-footer { |
|
margin: 1rem auto; |
|
max-width: 1152px; |
|
} |
|
#observablehq-main { |
|
min-height: calc(100vh - 20rem); |
|
position: relative; |
|
z-index: 0; |
|
} |
|
#observablehq-footer { |
|
display: block; |
|
margin-top: 10rem; |
|
font: 12px var(--sans-serif); |
|
color: var(--theme-foreground-faint); |
|
} |
|
#observablehq-footer nav { |
|
display: grid; |
|
max-width: 640px; |
|
grid-template-columns: 1fr 1fr; |
|
column-gap: 1rem; |
|
margin-bottom: 1rem; |
|
} |
|
#observablehq-footer nav a { |
|
display: flex; |
|
flex-direction: column; |
|
border: 1px solid var(--theme-foreground-fainter); |
|
border-radius: 8px; |
|
padding: 1rem; |
|
line-height: 1rem; |
|
text-decoration: none; |
|
} |
|
#observablehq-footer nav a span { |
|
font-size: 14px; |
|
} |
|
#observablehq-footer nav a:hover span { |
|
text-decoration: underline; |
|
} |
|
#observablehq-footer nav a:hover { |
|
border-color: var(--theme-foreground-focus); |
|
} |
|
#observablehq-footer nav a[rel=prev] { |
|
grid-column: 1; |
|
align-items: start; |
|
} |
|
#observablehq-footer nav a[rel=next] { |
|
grid-column: 2; |
|
align-items: end; |
|
} |
|
#observablehq-footer nav a::before { |
|
color: var(--theme-foreground-faint); |
|
} |
|
#observablehq-footer nav a[rel=prev]::before { |
|
content: "Previous page"; |
|
} |
|
#observablehq-footer nav a[rel=next]::before { |
|
content: "Next page"; |
|
} |
|
#observablehq-center { |
|
margin: 1rem 2rem; |
|
} |
|
#observablehq-sidebar { |
|
position: fixed; |
|
background: var(--theme-background-alt); |
|
color: var(--theme-foreground-muted); |
|
font: 14px var(--sans-serif); |
|
visibility: hidden; |
|
font-weight: 500; |
|
width: 272px; |
|
z-index: 2; |
|
top: 0; |
|
bottom: 0; |
|
left: -272px; |
|
box-sizing: border-box; |
|
padding: 0 0.5rem 1rem 0.5rem; |
|
overflow-y: auto; |
|
} |
|
#observablehq-sidebar ol, |
|
#observablehq-toc ol { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
#observablehq-sidebar > ol, |
|
#observablehq-sidebar > details { |
|
position: relative; |
|
padding-bottom: 0.5rem; |
|
margin: 0.5rem 0; |
|
border-bottom: solid 1px var(--theme-foreground-faintest); |
|
} |
|
#observablehq-sidebar > ol:first-child { |
|
position: sticky; |
|
top: 0; |
|
z-index: 1; |
|
background: var(--theme-background-alt); |
|
font-size: 16px; |
|
font-weight: 700; |
|
padding-top: 1rem; |
|
padding-left: 0.5rem; |
|
margin: 0; |
|
margin-left: -0.5rem; |
|
color: var(--theme-foreground); |
|
} |
|
#observablehq-sidebar > ol:last-child, |
|
#observablehq-sidebar > details:last-child { |
|
border-bottom: none; |
|
} |
|
#observablehq-sidebar summary { |
|
font-weight: 700; |
|
color: var(--theme-foreground); |
|
cursor: default; |
|
} |
|
#observablehq-sidebar summary::-webkit-details-marker, |
|
#observablehq-sidebar summary::marker { |
|
display: none; |
|
} |
|
#observablehq-sidebar summary::after { |
|
position: absolute; |
|
right: 0.5rem; |
|
width: 1rem; |
|
height: 1rem; |
|
background: var(--theme-foreground-muted); |
|
content: ""; |
|
-webkit-mask: var(--theme-caret); |
|
mask: var(--theme-caret); |
|
transition: transform 250ms ease; |
|
transform: rotate(-90deg); |
|
transform-origin: 50% 50%; |
|
} |
|
#observablehq-sidebar summary:hover::after { |
|
color: var(--theme-foreground); |
|
} |
|
#observablehq-sidebar details[open] summary::after { |
|
transform: rotate(0deg); |
|
} |
|
#observablehq-sidebar-toggle { |
|
position: fixed; |
|
appearance: none; |
|
background: none; |
|
top: 0; |
|
left: 0; |
|
height: 100%; |
|
width: 2rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: e-resize; |
|
margin: 0; |
|
color: var(--theme-foreground-muted); |
|
z-index: 1; |
|
} |
|
#observablehq-sidebar-close { |
|
position: absolute; |
|
top: 1rem; |
|
right: 0; |
|
width: 2rem; |
|
height: 2.2rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: var(--theme-foreground-muted); |
|
cursor: w-resize; |
|
z-index: 2; |
|
} |
|
#observablehq-sidebar-toggle::before, |
|
#observablehq-sidebar-close::before { |
|
content: ""; |
|
width: 1rem; |
|
height: 1rem; |
|
background: currentColor; |
|
-webkit-mask: var(--theme-toggle); |
|
mask: var(--theme-toggle); |
|
} |
|
#observablehq-sidebar-close::before { |
|
transform: scaleX(-1); |
|
} |
|
#observablehq-sidebar summary, |
|
.observablehq-link a { |
|
display: flex; |
|
padding: 0.5rem 1rem 0.5rem 1.5rem; |
|
margin-left: -0.5rem; |
|
align-items: center; |
|
} |
|
#observablehq-sidebar summary:hover, |
|
.observablehq-link-active a, |
|
.observablehq-link a:hover { |
|
background: var(--theme-background); |
|
} |
|
.observablehq-link a:hover { |
|
color: var(--theme-foreground-focus); |
|
} |
|
#observablehq-toc { |
|
display: none; |
|
position: fixed; |
|
color: var(--theme-foreground-muted); |
|
font: 400 14px var(--sans-serif); |
|
z-index: 1; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
overflow-y: auto; |
|
} |
|
#observablehq-toc nav { |
|
width: 192px; |
|
margin: 2rem 0; |
|
padding: 0 1rem; |
|
box-sizing: border-box; |
|
border-left: solid 1px var(--theme-foreground-faintest); |
|
} |
|
#observablehq-toc div { |
|
font-weight: 700; |
|
color: var(--theme-foreground); |
|
margin-bottom: 0.5rem; |
|
} |
|
.observablehq-secondary-link a { |
|
display: block; |
|
padding: 0.25rem 0; |
|
} |
|
.observablehq-link:not(.observablehq-link-active) a[href]:not(:hover), |
|
.observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover) { |
|
color: inherit; |
|
} |
|
.observablehq-link-active, |
|
.observablehq-secondary-link-active { |
|
position: relative; |
|
} |
|
.observablehq-link-active::before, |
|
.observablehq-secondary-link-highlight { |
|
content: ""; |
|
position: absolute; |
|
width: 3px; |
|
background: var(--theme-foreground-focus); |
|
} |
|
.observablehq-link-active::before { |
|
top: 0; |
|
bottom: 0; |
|
left: -0.5rem; |
|
} |
|
.observablehq-secondary-link-highlight { |
|
left: 1px; |
|
top: 2rem; |
|
height: 0; |
|
transition: top 150ms ease, height 150ms ease; |
|
} |
|
#observablehq-sidebar { |
|
transition: visibility 150ms 0ms, left 150ms 0ms ease; |
|
} |
|
.observablehq-sidebar-open ~ #observablehq-sidebar, |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar { |
|
left: 0; |
|
visibility: initial; |
|
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1); |
|
transition: visibility 0ms 0ms, left 150ms 0ms ease; |
|
} |
|
#observablehq-sidebar-backdrop { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
z-index: 2; |
|
} |
|
.observablehq-sidebar-open ~ #observablehq-sidebar-backdrop, |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop { |
|
display: initial; |
|
} |
|
@media (prefers-color-scheme: dark) { |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar { |
|
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5); |
|
} |
|
} |
|
@media (min-width: calc(640px + 6rem + 272px)) { |
|
#observablehq-sidebar { |
|
transition: none !important; |
|
} |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop { |
|
display: none; |
|
} |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar, |
|
#observablehq-sidebar-toggle:indeterminate ~ #observablehq-sidebar { |
|
left: 0; |
|
visibility: initial; |
|
box-shadow: none; |
|
border-right: solid 1px var(--theme-foreground-faintest); |
|
} |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-center, |
|
#observablehq-sidebar-toggle:indeterminate ~ #observablehq-center { |
|
padding-left: calc(272px + 1rem); |
|
padding-right: 1rem; |
|
} |
|
} |
|
@media (min-width: calc(640px + 6rem + 192px)) { |
|
#observablehq-toc ~ #observablehq-center { |
|
padding-right: calc(192px + 1rem); |
|
} |
|
#observablehq-toc { |
|
display: block; |
|
} |
|
} |
|
@media (min-width: calc(640px + 6rem + 272px)) { |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-toc, |
|
#observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc { |
|
display: none; |
|
} |
|
} |
|
@media (min-width: calc(640px + 6rem + 272px + 192px)) { |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-toc, |
|
#observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc, |
|
#observablehq-toc { |
|
display: block; |
|
} |
|
#observablehq-sidebar-toggle:checked ~ #observablehq-toc ~ #observablehq-center, |
|
#observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc ~ #observablehq-center, |
|
#observablehq-toc ~ #observablehq-center { |
|
padding-right: calc(192px + 1rem); |
|
} |
|
} |
|
.observablehq-pre-container { |
|
position: relative; |
|
margin: 1rem -1rem; |
|
max-width: 960px; |
|
} |
|
.observablehq-pre-container::after { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
height: 21px; |
|
font: 12px var(--sans-serif); |
|
color: var(--theme-foreground-muted); |
|
background: |
|
linear-gradient( |
|
to right, |
|
transparent, |
|
var(--theme-background-alt) 40%); |
|
padding: 0.5rem 0.5rem 0.5rem 1.5rem; |
|
} |
|
.observablehq-pre-container[data-language]::after { |
|
content: attr(data-language); |
|
} |
|
.observablehq-pre-container pre { |
|
padding-right: 4rem; |
|
margin: 0; |
|
max-width: none; |
|
} |
|
.observablehq-pre-copy { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
background: none; |
|
color: transparent; |
|
border: none; |
|
border-radius: 4px; |
|
padding: 0 8px; |
|
margin: 4px; |
|
height: 29px; |
|
cursor: pointer; |
|
z-index: 1; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.observablehq-pre-container[data-copy] .observablehq-pre-copy, |
|
.observablehq-pre-container:hover .observablehq-pre-copy, |
|
.observablehq-pre-container .observablehq-pre-copy:focus { |
|
background: var(--theme-background-alt); |
|
color: var(--theme-foreground-faint); |
|
} |
|
.observablehq-pre-container .observablehq-pre-copy:hover { |
|
color: var(--theme-foreground-muted); |
|
} |
|
.observablehq-pre-container .observablehq-pre-copy:active { |
|
color: var(--theme-foreground); |
|
background: var(--theme-foreground-faintest); |
|
} |
|
#observablehq-sidebar.observablehq-search-results > ol:not(:first-child), |
|
#observablehq-sidebar.observablehq-search-results > details { |
|
display: none; |
|
} |
|
#observablehq-search { |
|
position: relative; |
|
padding: 0.5rem 0 0 0; |
|
display: flex; |
|
align-items: center; |
|
} |
|
#observablehq-search input { |
|
padding: 6px 4px 6px 2.2em; |
|
width: 100%; |
|
border: none; |
|
border-radius: 4px; |
|
background-color: var(--theme-background); |
|
font-size: 13.3px; |
|
height: 28px; |
|
} |
|
#observablehq-search input::placeholder { |
|
color: var(--theme-foreground-faint); |
|
} |
|
#observablehq-search::before { |
|
position: absolute; |
|
left: 0.5rem; |
|
content: ""; |
|
width: 1rem; |
|
height: 1rem; |
|
background: currentColor; |
|
-webkit-mask: var(--theme-magnifier); |
|
mask: var(--theme-magnifier); |
|
pointer-events: none; |
|
} |
|
#observablehq-search::after { |
|
position: absolute; |
|
right: 6px; |
|
content: attr(data-shortcut); |
|
pointer-events: none; |
|
} |
|
#observablehq-search:focus-within::after { |
|
content: ""; |
|
} |
|
#observablehq-search-results { |
|
--relevance-width: 32px; |
|
position: absolute; |
|
overflow-y: scroll; |
|
top: 6.5rem; |
|
left: 0; |
|
right: 0.5rem; |
|
bottom: 0; |
|
} |
|
#observablehq-search-results a span { |
|
max-width: 184px; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
#observablehq-search-results div { |
|
text-align: right; |
|
font-size: 10px; |
|
margin: 0.5em; |
|
} |
|
#observablehq-search-results li { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
} |
|
#observablehq-search-results a { |
|
flex-grow: 1; |
|
} |
|
#observablehq-search-results li:after, |
|
#observablehq-search-results a:after { |
|
content: ""; |
|
width: var(--relevance-width); |
|
height: 4px; |
|
position: absolute; |
|
right: 0.5em; |
|
border-radius: 2px; |
|
background: var(--theme-foreground-muted); |
|
} |
|
#observablehq-search-results li.observablehq-link-active:after { |
|
background: var(--theme-foreground-focus); |
|
} |
|
#observablehq-search-results a:after { |
|
background: var(--theme-foreground-faintest); |
|
} |
|
#observablehq-search-results li[data-score="0"]:after { |
|
width: calc(var(--relevance-width) * 0.125); |
|
} |
|
#observablehq-search-results li[data-score="1"]:after { |
|
width: calc(var(--relevance-width) * 0.25); |
|
} |
|
#observablehq-search-results li[data-score="2"]:after { |
|
width: calc(var(--relevance-width) * 0.4375); |
|
} |
|
#observablehq-search-results li[data-score="3"]:after { |
|
width: calc(var(--relevance-width) * 0.625); |
|
} |
|
#observablehq-search-results li[data-score="4"]:after { |
|
width: calc(var(--relevance-width) * 0.8125); |
|
} |
|
@media print { |
|
#observablehq-center { |
|
padding-left: 1em !important; |
|
} |
|
#observablehq-sidebar, |
|
#observablehq-footer { |
|
display: none !important; |
|
} |
|
} |
|
|
|
|
|
#observablehq-center { |
|
container-type: inline-size; |
|
} |
|
.grid { |
|
margin: 1rem 0; |
|
display: grid; |
|
gap: 1rem; |
|
grid-auto-rows: 1fr; |
|
} |
|
.grid svg { |
|
overflow: visible; |
|
} |
|
.grid figure { |
|
margin: 0; |
|
} |
|
.grid > * > p:first-child { |
|
margin-top: 0; |
|
} |
|
.grid > * > p:last-child { |
|
margin-bottom: 0; |
|
} |
|
@container (min-width: 640px) { |
|
.grid-cols-2, |
|
.grid-cols-4 { |
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
} |
|
.grid-cols-2 .grid-colspan-2, |
|
.grid-cols-2 .grid-colspan-3, |
|
.grid-cols-2 .grid-colspan-4, |
|
.grid-cols-4 .grid-colspan-2, |
|
.grid-cols-4 .grid-colspan-3, |
|
.grid-cols-4 .grid-colspan-4 { |
|
grid-column: span 2; |
|
} |
|
} |
|
@container (min-width: 720px) { |
|
.grid-cols-3 { |
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
|
} |
|
.grid-cols-3 .grid-colspan-2 { |
|
grid-column: span 2; |
|
} |
|
.grid-cols-3 .grid-colspan-3 { |
|
grid-column: span 3; |
|
} |
|
} |
|
@container (min-width: 1080px) { |
|
.grid-cols-4 { |
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
|
} |
|
.grid-cols-4 .grid-colspan-3 { |
|
grid-column: span 3; |
|
} |
|
.grid-cols-4 .grid-colspan-4 { |
|
grid-column: span 4; |
|
} |
|
} |
|
.grid-rowspan-2 { |
|
grid-row: span 2; |
|
} |
|
.grid-rowspan-3 { |
|
grid-row: span 3; |
|
} |
|
.grid-rowspan-4 { |
|
grid-row: span 4; |
|
} |
|
|
|
|
|
.note, |
|
.tip, |
|
.warning, |
|
.caution { |
|
border-left: solid 1px var(--theme-foreground-fainter); |
|
padding: 0 2rem; |
|
margin: 1rem 0; |
|
box-sizing: border-box; |
|
max-width: 640px; |
|
} |
|
.note::before, |
|
.tip::before, |
|
.warning::before, |
|
.caution::before { |
|
content: "Note"; |
|
display: block; |
|
margin-bottom: 1rem; |
|
font-weight: 700; |
|
color: var(--theme-foreground-muted); |
|
} |
|
.tip { |
|
border-left-color: var(--theme-green); |
|
} |
|
.tip::before { |
|
content: "Tip"; |
|
color: var(--theme-green); |
|
} |
|
.warning { |
|
border-left-color: var(--theme-yellow); |
|
} |
|
.warning::before { |
|
content: "Warning"; |
|
color: var(--theme-yellow); |
|
} |
|
.caution { |
|
border-left-color: var(--theme-red); |
|
} |
|
.caution::before { |
|
content: "Caution"; |
|
color: var(--theme-red); |
|
} |
|
.note[label]::before, |
|
.tip[label]::before, |
|
.warning[label]::before, |
|
.caution[label]::before { |
|
content: attr(label); |
|
} |
|
|
|
|
|
.card { |
|
background: var(--theme-background-alt); |
|
border: solid 1px var(--theme-foreground-faintest); |
|
border-radius: 0.75rem; |
|
padding: 1rem; |
|
margin: 1rem 0; |
|
font: 14px var(--sans-serif); |
|
} |
|
.grid > .card, |
|
.card figure { |
|
margin: 0; |
|
} |
|
.card h2, |
|
.card h3 { |
|
font-size: inherit; |
|
} |
|
.card h2 { |
|
font-weight: 500; |
|
font-size: 15px; |
|
} |
|
.card h3 { |
|
font-weight: 400; |
|
color: var(--theme-foreground-muted); |
|
} |
|
.card h2 ~ svg, |
|
.card h3 ~ svg, |
|
.card h2 ~ p, |
|
.card h3 ~ p { |
|
margin-top: 1rem; |
|
} |
|
|
|
|
|
.observablehq--block:not(.observablehq--loading):empty { |
|
margin: 0; |
|
} |
|
@keyframes observablehq-loading { |
|
from { |
|
transform: rotate(0); |
|
} |
|
to { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
.observablehq--loading::before { |
|
content: "\21bb"; |
|
font: var(--monospace-font); |
|
color: var(--theme-foreground-muted); |
|
display: inline-block; |
|
transform-origin: 0.32em 55%; |
|
animation-name: observablehq-loading; |
|
animation-timing-function: linear; |
|
animation-duration: 1s; |
|
animation-iteration-count: infinite; |
|
} |
|
.observablehq--block.observablehq--loading::before { |
|
display: block; |
|
} |
|
.observablehq--block { |
|
margin: 1rem 0; |
|
} |
|
.observablehq--block .observablehq, |
|
.observablehq--block .observablehq--inspect { |
|
display: block; |
|
} |
|
.observablehq--collapsed, |
|
.observablehq--expanded.observablehq--inspect a { |
|
cursor: pointer; |
|
} |
|
.observablehq--caret { |
|
margin-right: 4px; |
|
vertical-align: baseline; |
|
} |
|
.observablehq--field { |
|
text-indent: -1rem; |
|
margin-left: 1rem; |
|
} |
|
.observablehq--inspect { |
|
font: var(--monospace-font); |
|
overflow-x: auto; |
|
white-space: pre; |
|
} |
|
.observablehq--inspect.observablehq--import { |
|
white-space: normal; |
|
} |
|
.observablehq--inspect::-webkit-scrollbar { |
|
display: none; |
|
} |
|
.observablehq--error .observablehq--inspect { |
|
word-break: break-all; |
|
white-space: pre-wrap; |
|
} |
|
.observablehq--string-expand { |
|
margin-left: 6px; |
|
padding: 2px 6px; |
|
border-radius: 2px; |
|
font-size: 80%; |
|
background: var(--theme-background-alt); |
|
cursor: pointer; |
|
vertical-align: middle; |
|
} |
|
.observablehq--keyword, |
|
.hljs-doctag, |
|
.hljs-keyword, |
|
.hljs-meta .hljs-keyword, |
|
.hljs-template-tag, |
|
.hljs-template-variable, |
|
.hljs-type, |
|
.hljs-variable.language_ { |
|
color: var(--syntax-keyword); |
|
} |
|
.observablehq--symbol, |
|
.hljs-title, |
|
.hljs-title.class_, |
|
.hljs-title.class_.inherited__, |
|
.hljs-title.function_ { |
|
color: var(--syntax-entity); |
|
} |
|
.observablehq--index, |
|
.observablehq--key, |
|
.hljs-attr, |
|
.hljs-attribute, |
|
.hljs-meta, |
|
.hljs-operator, |
|
.hljs-variable, |
|
.hljs-selector-attr, |
|
.hljs-selector-class, |
|
.hljs-selector-id { |
|
color: var(--syntax-constant); |
|
} |
|
.observablehq--regexp, |
|
.observablehq--string, |
|
.hljs-regexp, |
|
.hljs-string, |
|
.hljs-meta .hljs-string { |
|
color: var(--syntax-string); |
|
} |
|
.observablehq--null, |
|
.observablehq--undefined, |
|
.hljs-built_in, |
|
.hljs-literal, |
|
.hljs-symbol { |
|
color: var(--syntax-variable); |
|
} |
|
.observablehq--prototype-key, |
|
.observablehq--empty, |
|
.hljs-comment, |
|
.hljs-formula { |
|
color: var(--syntax-comment); |
|
} |
|
.observablehq--bigint, |
|
.observablehq--boolean, |
|
.observablehq--date, |
|
.observablehq--forbidden, |
|
.observablehq--number, |
|
.hljs-name, |
|
.hljs-number, |
|
.hljs-quote, |
|
.hljs-selector-tag, |
|
.hljs-selector-pseudo { |
|
color: var(--syntax-entity-tag); |
|
} |
|
.hljs-subst { |
|
color: var(--syntax-storage-modifier-import); |
|
} |
|
.hljs-section { |
|
color: var(--syntax-markup-heading); |
|
font-weight: bold; |
|
} |
|
.hljs-bullet { |
|
color: var(--syntax-markup-list); |
|
} |
|
.hljs-emphasis { |
|
color: var(--syntax-markup-italic); |
|
font-style: italic; |
|
} |
|
.hljs-strong { |
|
color: var(--syntax-markup-bold); |
|
font-weight: bold; |
|
} |
|
.hljs-addition { |
|
color: var(--syntax-markup-inserted); |
|
background-color: var(--syntax-markup-inserted-background); |
|
} |
|
.hljs-deletion { |
|
color: var(--syntax-markup-deleted); |
|
background-color: var(--syntax-markup-deleted-background); |
|
} |
|
.observablehq--empty { |
|
font-style: oblique; |
|
} |
|
.observablehq--error { |
|
color: var(--syntax-keyword); |
|
} |
|
|
|
|
|
.plot-d6a7b5 { |
|
--plot-background: var(--theme-background); |
|
} |
|
p .plot-d6a7b5 { |
|
display: inline-block; |
|
} |
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: light) { |
|
:root { |
|
--syntax-keyword: #d73a49; |
|
--syntax-entity: #6f42c1; |
|
--syntax-constant: #005cc5; |
|
--syntax-string: #032f62; |
|
--syntax-variable: #e36209; |
|
--syntax-comment: var(--theme-foreground-muted); |
|
--syntax-entity-tag: #22863a; |
|
--syntax-storage-modifier-import: #24292e; |
|
--syntax-markup-heading: #005cc5; |
|
--syntax-markup-list: #735c0f; |
|
--syntax-markup-italic: #24292e; |
|
--syntax-markup-bold: #24292e; |
|
--syntax-markup-inserted: #22863a; |
|
--syntax-markup-inserted-background: #f0fff4; |
|
--syntax-markup-deleted: #b31d28; |
|
--syntax-markup-deleted-background: #ffeef0; |
|
} |
|
} |
|
|
|
|
|
@media (prefers-color-scheme: light) { |
|
:root { |
|
--theme-background-b: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-a)); |
|
--theme-background: var(--theme-background-a); |
|
--theme-background-alt: var(--theme-background-b); |
|
--theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-a)); |
|
--theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-a)); |
|
--theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-a)); |
|
--theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-a)); |
|
--theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-a)); |
|
color-scheme: light; |
|
} |
|
} |
|
|
|
|
|
@media (prefers-color-scheme: light) { |
|
:root { |
|
--theme-foreground: #1b1e23; |
|
--theme-foreground-focus: #3b5fc0; |
|
--theme-background-a: #ffffff; |
|
} |
|
} |
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--syntax-keyword: #ff7b72; |
|
--syntax-entity: #d2a8ff; |
|
--syntax-constant: #79c0ff; |
|
--syntax-string: #a5d6ff; |
|
--syntax-variable: #ffa657; |
|
--syntax-comment: var(--theme-foreground-muted); |
|
--syntax-entity-tag: #7ee787; |
|
--syntax-storage-modifier-import: #c9d1d9; |
|
--syntax-markup-heading: #1f6feb; |
|
--syntax-markup-list: #f2cc60; |
|
--syntax-markup-italic: #c9d1d9; |
|
--syntax-markup-bold: #c9d1d9; |
|
--syntax-markup-inserted: #aff5b4; |
|
--syntax-markup-inserted-background: #033a16; |
|
--syntax-markup-deleted: #ffdcd7; |
|
--syntax-markup-deleted-background: #67060c; |
|
} |
|
} |
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--theme-background-a: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-b)); |
|
--theme-background: var(--theme-background-a); |
|
--theme-background-alt: var(--theme-background-b); |
|
--theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-b)); |
|
--theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-b)); |
|
--theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-b)); |
|
--theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-b)); |
|
--theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-b)); |
|
color-scheme: dark; |
|
} |
|
} |
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--theme-foreground: #dfdfd6; |
|
--theme-foreground-focus: oklch(0.712564 0.257662 265.758); |
|
--theme-background-b: #161616; |
|
} |
|
} |
|
|
|
|
|
|
