kino_zoetrope

.stacks {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 1em;
    width: 100%;
    overflow: auto;
    flex-wrap: wrap;
}

.stack-label {
    font-weight: bold;
}

.image-with-desc {
    display: grid;
    justify-content: start;
    align-content: center;
    justify-items: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-basis: 10em;
    flex-shrink: 0;
    padding: 1ex;
    gap: 1ex;
    border: 2px solid #aaa;
}

.image-with-desc-image,
.image-with-desc-desc {
    grid-area: plot-content;
}

.plot-figure {
    display: grid;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}

.plot {
    object-fit: contain;
    object-position: center;
    width: 100%;
    max-height: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    background-image: conic-gradient(
        currentColor 0%,
        currentColor 25%,
        transparent 25%,
        transparent 50%,
        currentColor 50%,
        currentColor 75%,
        transparent 75%,
        transparent 100%
    );
    background-size: 2ex 2ex;
    background-position: 50% 50%;
    color: #48205d55;
    border: 1px solid black;
}

.plot.sharp {
    image-rendering: pixelated;
}

dl {
    font-family: monospace;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 1ex 1em;
    align-items: center;
    margin: 1em 0 0;
}

dt {
    font-weight: bold;
    text-align: right;
    justify-content: end;
}

dt,
dd {
    margin: 0;
    white-space: nowrap;
    align-items: center;
    gap: 1ex;
    display: flex;
}

.slider-output {
    min-width: 7em;
    text-align: center;
}

.stack-outer {
    display: grid;
    grid-template-columns: [axis-y-start] auto [axis-y-end plot-content-start axis-x-start] 1fr [plot-content-end plot-scale-start axis-x-end] auto [plot-scale-end];
    grid-template-rows: [axis-y-start plot-content-start plot-scale-start] 1fr [axis-y-end plot-content-end plot-scale-end axis-x-start] auto [axis-x-end];
    gap: 0.5ex;
    user-select: none;
}

.axis-x {
    grid-area: axis-x;
    text-align: center;
    font-size: smaller;
    white-space: nowrap;
}
.axis-y {
    position: relative;
    grid-area: axis-y;
    width: 1.5em;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;
}

.axis-y-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    text-align: center;
    font-size: smaller;
}

.stack {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
    justify-content: center;
    box-sizing: content-box;
    width: 10em;
}

.stack.resize {
    overflow: hidden;
    resize: both;
    max-width: 80vw;
    max-height: 80vh;
    min-width: 5em;
    min-height: 5em;
    padding-right: 1em;
}

.stack-item {
    grid-area: 1 / 1 / 2 / 2;
}

.stack-scale {
    grid-area: plot-scale;
    display: flex;
    align-items: stretch;
    gap: 1ex;
}

.scale-gradient {
    background-image: linear-gradient(0deg, black, white);
    border: 1px solid black;
    width: 1em;
    flex-shrink: 0;
}

.scale-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    font-family: monospace;
}

input[type="range"] {
    height: 2.5em;
}

.scale-markers {
    width: 100%;
    height: 100%;
}

.image-overlay {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.image-marker-hidden:not(.image-marker-faded) {
    display: none;
}

.image-marker-hidden.image-marker-faded {
    opacity: 0.3;
}

.slider-list {
    display: flex;
    padding: 0 1em;
    background: #eee;
    margin: 1ex 0;
}

.slider-body {
    flex-grow: 1;
    display: flex;
}

.slider-input {
    accent-color: #48205d;
    flex-grow: 1;
    padding: 1ex 0;
    margin: 0;
}