:root {
    color-scheme: dark;
    font-family: "Share Tech Mono", "Courier New", monospace;
    background: #050607;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    color: rgba(218, 226, 236, 0.62);
    background:
        radial-gradient(ellipse at 50% 12%, rgba(31, 36, 42, 0.32), transparent 44%),
        #050607;
}

.gallery {
    min-height: 100vh;
    padding: 24px 18px 58px;
}

.works {
    display: grid;
    gap: 42px;
    width: min(100%, 640px);
    margin: 18px auto 0;
}

.live-screen {
    display: block;
    width: 100%;
    height: min(56vw, 360px);
    overflow: hidden;
    border: 1px solid rgba(187, 201, 219, 0.13);
    background: #030405;
    box-shadow:
        0 0 22px rgba(177, 191, 230, 0.2),
        0 0 72px rgba(125, 146, 195, 0.18),
        0 0 148px rgba(87, 105, 151, 0.13);
    transition: box-shadow 500ms ease, filter 500ms ease;
}

.live-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.live-screen:hover,
.live-screen:focus-visible {
    filter: brightness(1.1);
    box-shadow:
        0 0 28px rgba(196, 209, 243, 0.28),
        0 0 92px rgba(141, 159, 201, 0.26),
        0 0 172px rgba(87, 105, 151, 0.17);
}

.plaquette {
    max-width: 570px;
    margin: -4px 0 12px;
    color: rgba(209, 217, 229, 0.62);
    font-size: 13px;
    line-height: 1.72;
}

.plaquette h1 {
    margin: 0 0 8px;
    color: rgba(231, 236, 244, 0.8);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.12em;
}

.plaquette p {
    margin: 0 0 15px;
}

.plaquette .work-meta {
    margin-bottom: 22px;
    color: rgba(182, 194, 211, 0.56);
    font-size: 11px;
    letter-spacing: 0.1em;
    line-height: 1.65;
}

.prep-screens {
    display: grid;
    gap: 15px;
}

.prep-screen {
    display: grid;
    align-content: end;
    min-height: 118px;
    padding: 14px;
    border: 1px solid rgba(180, 193, 208, 0.09);
    color: rgba(198, 209, 222, 0.45);
    background:
        linear-gradient(135deg, rgba(73, 83, 94, 0.16), rgba(7, 9, 11, 0.72)),
        repeating-linear-gradient(0deg, transparent 0 13px, rgba(190, 202, 218, 0.045) 14px),
        repeating-linear-gradient(90deg, transparent 0 13px, rgba(190, 202, 218, 0.045) 14px);
}

.prep-screen span {
    font-size: 18px;
    letter-spacing: 0.18em;
}

.prep-screen small {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.13em;
}

.gallery-mark {
    z-index: 2;
    letter-spacing: 0.18em;
    text-transform: lowercase;
}

.gallery-mark {
    display: grid;
    gap: 8px;
    width: min(100%, 640px);
    margin: 0 auto 32px;
    font-size: 13px;
}

.gallery-mark small {
    font-size: 10px;
    opacity: 0.54;
}

.gallery-footer {
    width: min(100%, 640px);
    margin: 42px auto 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: lowercase;
}

.gallery-footer a {
    color: rgba(182, 194, 211, 0.42);
    text-decoration: none;
    transition: color 300ms ease;
}

.gallery-footer a:hover,
.gallery-footer a:focus-visible {
    color: rgba(231, 236, 244, 0.8);
}