@layer popover {
[popover] {
position: fixed;
z-index: 2147483647;
inset: 0;
padding: 0.25em;
width: fit-content;
height: fit-content;
border: solid;
background: canvas;
color: canvastext;
overflow: auto;
margin: auto;
}
@supports not selector([popover]:open) {
[popover]:not(.\:popover-open, dialog[open]) {
display: none;
}
[anchor].\:popover-open {
inset: auto;
}
}
@supports not selector([popover]:popover-open) {
[popover]:not(.\:popover-open, dialog[open]) {
display: none;
}
[anchor].\:popover-open {
inset: auto;
}
}
}@layer demo, meta;
@layer meta {
@layer metabox {
#metabox {
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1.2rem;
z-index: 2147483647;
} .is-embed #metabox :is(#version-selector, #version-selector-popover, .button[href="/"]) {
display: none;
}
#metabox :is(button, .button) {
font-size: 2.5rem;
line-height: 1;
display: block;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.25s ease-in-out;
border-radius: 0.25rem;
text-decoration: none;
}
#metabox :is(button, .button):active,
#metabox :is(button, .button):focus {
outline: 2px dashed rgb(0 0 0 / 0.5);
outline-offset: 0.25rem;
}
#metabox > :is(button, .button):hover {
opacity: 1 !important;
}
@keyframes pulsate {
80% {
opacity: 1;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#metabox > button.animated {
animation: 5s pulsate ease-in alternate infinite;
}
#metabox > button.animated:hover,
#metabox > button.animated:focus,
#metabox:has(dialog[open]) > button.animated {
animation: none;
}
#metabox > button[disabled] {
cursor: not-allowed;
outline: none !important;
}
}
@layer infobox {
@layer ui {
#infobox[open] {
box-sizing: border-box;
margin: 10vh auto;
width: 80vw;
max-width: 90ch;
max-height: 80vh;
padding: 2rem;
overscroll-behavior: contain;
background: #eee;
border: 0.25rem solid lightblue;
overflow: auto;
position: fixed;
}
#infobox::backdrop {
background-color: rgb(0 0 0 / 0.5);
}
#infobox > :first-child {
margin-top: 0;
}
#infobox > :last-child {
margin-bottom: 0;
}
#infobox-close { position: absolute;
right: 0.5rem;
top: 0.5rem;
filter: grayscale();
}
#infobox-close:hover,
#infobox-close:focus {
filter: none;
}
}
@layer code {
#infobox pre {
border: 1px solid #dedede;
padding: 1em;
background: #f7f7f7;
font-family: 'Courier 10 Pitch', Courier, monospace;
overflow-x: auto;
border-left: 0.4em solid cornflowerblue;
tab-size: 2;
}
#infobox code:not(pre code),
#infobox output:not(code:has(output) output) {
background: #f7f7f7;
border: 1px solid rgb(0 0 0 / 0.2);
padding: 0.1rem 0.3rem;
margin: 0.1rem 0;
border-radius: 0.2rem;
display: inline-block;
}
}
}
@layer popover {
[popovertarget][data-activeversion] {
position: relative;
}
[popovertarget][data-activeversion]::after {
content: attr(data-activeversion);
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
font-size: 0.8rem;
font-weight: bold;
padding: 0.1em;
background-color: #1874bc;
color: white;
font-family: 'Courier New', Courier, monospace;
font-variant-numeric: tabular-nums;
display: block;
min-width: 2ex;
line-height: 1;
}
[popovertarget][data-activeversion][data-activelang="js"]::after {
background-color: #f7df1e;
color: #333;
}
[popovertarget] {
anchor-name: --my-anchor-popover;
}
[popover] {
inset: auto;
width: auto;
padding: 1rem 1rem 2rem 1rem;
overflow: unset;
bottom: calc(anchor(top) - 3rem);
right: calc(anchor(right) + 3rem);
}
.no-anchor [popover] {
min-width: 20rem; z-index: 2147483647;
bottom: 10rem;
right: 4.5rem;
}
[popover] > :first-child {
margin-top: 0;
}
[popover] > :last-child {
margin-bottom: 0;
}
[popover] [data-lang]::before {
content: attr(data-lang);
font-size: 0.8rem;
font-weight: bold;
padding: 0.1em;
background-color: blue;
color: white;
font-family: 'Courier New', Courier, monospace;
font-variant-numeric: tabular-nums;
background-color: #1874bc;
display: inline-block;
width: 2rem;
text-align: center;
vertical-align: middle;
margin-right: 0.2rem;
}
[popover] [data-lang="js"]::before {
background-color: #f7df1e;
color: #333;
}
[popover] [data-selected] {
font-weight: 700;
}
}
@layer warning {
.warning {
box-sizing: border-box;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
background: rgba(255 255 205 / 0.8);
}
.warning > :first-child {
margin-top: 0;
}
.warning > :last-child {
margin-bottom: 0;
}
.warning a {
color: blue;
}
.warning--info {
border: 1px solid #123456;
background: rgb(205 230 255 / 0.8);
}
.warning--alarm {
border: 1px solid red;
background: #ff000010;
}
@supports (animation-timeline: view()) {
.warning:not([data-bug]) {
display: none;
}
}
@supports(animation-range: 0vh 90vh) {
.warning[data-bug="1427062"] {
display: none;
}
}
}
}@layer demo {
@layer base {
.cards,
.cards * {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--cover-size: 15rem;
}
@media (max-width: 1024px) {
:root {
--cover-size: 9rem;
}
}
@media (max-width: 600px) {
:root {
--cover-size: 6rem;
}
}
.cards {
list-style: none;
overflow-x: scroll;
width: 100%;
white-space: nowrap;
outline: 1px solid #333; background: rgb(177 176 176 / 50%);
border-radius: 10px;
}
@layer scroll-snapping { #controls:has(#scroll-snapping: checked) ~ .cards:not(.active) {
scroll-snap-type: x mandatory;
}
#controls:has(#scroll-snapping:checked)~.cards li {
scroll-snap-align: center;
}
}
.cards li {
display: inline-block;
width: var(--cover-size);
height: var(--cover-size);
}
.cards li a img {
display: block;
width: var(--cover-size);
height: var(--cover-size);
-webkit-box-reflect: below 0.5em linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
}
.cards {
--size: 6;
max-height: 400px;
overflow-y: hidden; width: calc(var(--cover-size) * var(--size));
margin: 0 auto;
padding: calc(var(--cover-size) / 3 * 2) 0;
position: relative;
max-width: 90vw;
}  .cards li:first-of-type {
margin-left: calc(20% - (var(--cover-size) / 2));
}
.cards li:last-of-type {
margin-right: calc(50% - (var(--cover-size) / 2));
}
}
@layer components {
@layer warning {
.warning {
--size: 6;
width: calc(var(--cover-size) * var(--size));
margin: 0 auto !important;
max-width: 90vw;
}
}
@layer debug {
#controls {
position: absolute;
top: 1em;
left: 1em;
}
#controls label {
display: block;
color: white;
}
#controls:has(#debug:checked)~.cards {
border: 1px solid lime;
}
#controls:has(#debug:checked)~.cards li {
text-align: center;
color: white;
border: 1px solid blue;
}
#controls:has(#debug:checked)~.cards li::before {
content: attr(id);
display: block;
position: absolute;
inset: 0;
line-height: var(--cover-size);
opacity: 0.5;
}
#controls:has(#debug:checked)~.cards li img {
opacity: 0.5;
}
}
}
} .cards li {
margin-right: 60px;
margin-left: 30px; perspective: 40em;
position: relative;
z-index: 1;
will-change: z-index;
user-select: none;
}
.is-embed #controls {
display: none;
}