:root {
    color-scheme: dark;
    --navy: #020b2a;
    --ink: #e3f7ff;
    --muted: #9fc5dc;
    --panel: #071a42;
    --line: #176ba9;
    --accent: #02b3f2;
    --cyan: #0ad5db;
}

* {
    box-sizing: border-box;
}

body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    color: var(--ink);
    background: var(--navy);
    font: 16px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

h1 {
    margin: 0;
    color: var(--accent);
    letter-spacing: .05em;
}

h2 {
    font-size: 1rem;
    margin: 0 0 .8rem;
    color: var(--cyan);
}

p {
    color: var(--muted);
    max-width: 75ch;
}

.actions,
.header {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
}

button,
a.button {
    border: 1px solid var(--accent);
    color: var(--navy);
    background: var(--accent);
    padding: .45rem .65rem;
    border-radius: .25rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

a.button.secondary,
.program-actions .secondary {
    border-color: var(--cyan);
    color: var(--cyan);
    background: transparent;
}

button:hover,
a.button:hover {
    filter: brightness(1.12);
}

#status {
    min-height: 1.5em;
    color: var(--cyan);
}

main {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.6fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

section {
    border: 1px solid var(--line);
    padding: 1rem;
    background: var(--panel);
}

.disk-instructions {
    margin-top: 1.5rem;
}

.disk-instructions ol {
    margin: 0;
    padding-left: 1.4rem;
    color: var(--muted);
}

.disk-instructions a {
    color: var(--cyan);
}

#category-list,
#program-list {
    display: grid;
    gap: .45rem;
    max-height: 42vh;
    overflow-y: auto;
    padding-right: .25rem;
}

.category,
.program {
    width: 100%;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: .55rem;
}

.category {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: .45rem;
}

.category-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
}

.category-count {
    color: var(--muted);
}

.category[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.program {
    display: grid;
    grid-template-columns: 48px max-content minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    border-color: var(--line);
    padding: .55rem;
}

.program[aria-pressed="true"] {
    border-color: var(--accent);
    background: rgba(2, 179, 242, .12);
}

.program-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}

.program span {
    display: grid;
    gap: .15rem;
}

.program small {
    color: var(--muted);
}

.program-info {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr);
    gap: 1rem;
    margin: 0 0 1rem;
    border: 1px solid var(--accent);
    padding: .8rem;
    background: rgba(2, 179, 242, .08);
}

#program-screenshot {
    width: 320px;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    align-self: start;
    image-rendering: pixelated;
    background: var(--navy);
}

.program-details {
    min-width: 0;
}

.program-details h2 {
    margin-bottom: .35rem;
}

#program-readme {
    width: 100%;
    height: 180px;
    margin-top: .75rem;
    border: 1px solid var(--line);
    background: #fff;
}

.program-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.program-actions button,
.program-actions a.button {
    padding: .45rem .65rem;
    font-size: .85rem;
}

.empty {
    color: var(--muted);
}

code {
    color: var(--cyan);
}

@media (max-width: 720px) {
    main {
        grid-template-columns: 1fr;
    }
}