.prototypes-page { max-width: 760px; }

.prototype-introduction h2 { margin-bottom: 6px; }

.prototype-status {
    color: #64748b;
    font-size: 11px;
    margin: 10px 0;
}

.prototype-status:empty { display: none; }
.prototype-status.is-error { color: #b91c1c; font-weight: bold; }

.prototype-controls { margin: 10px 0 8px; }

.prototype-search-label {
    color: #333;
    display: block;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .8px;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.prototype-search {
    border: 1px solid #cbd5e1;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 12px;
    padding: 5px 6px;
    width: 100%;
}

.prototype-list {
    border: 1px solid #cbd5e1;
    display: grid;
    gap: 0;
}

.prototype-summary {
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #cbd5e1;
    cursor: pointer;
    display: grid;
    gap: 0;
    grid-template-columns: 78.22px minmax(0, 1fr);
    padding: 0;
}

.prototype-summary:last-child { border-bottom: 0; }

.prototype-summary:hover,
.prototype-summary:focus-visible {
    background: #f8fbff;
    outline: none;
}

.prototype-summary:focus-visible { box-shadow: inset 0 0 0 2px #4a7fc4; }

.prototype-summary.is-active {
    background: #1a3f77;
    color: #fff;
    box-shadow: inset 0 0 0 2px #0b1020;
}

.prototype-summary.is-active .prototype-meta { color: #dbeafe; }
.prototype-summary.is-active h3 { color: #fff; }

.prototype-summary h3 { font-size: 11px; margin: 0 0 2px; text-transform: none; }
.prototype-summary p { margin: 0; }

.prototype-summary-text { padding: 5px 6px; }

.prototype-thumbnail {
    align-items: center;
    background: #0b1020;
    color: #8fb5e8;
    display: flex;
    font-family: "Courier New", monospace;
    font-size: 7px;
    height: 44px;
    aspect-ratio: 16 / 9;
    justify-content: center;
    overflow: hidden;
}

.prototype-thumbnail img { height: 100%; object-fit: cover; width: 100%; }

.prototype-detail { margin: 0; }
.prototype-detail:empty { display: none; }
.prototype-detail .prototype-card { border-width: 1px; }

.prototype-card {
    background: #fff;
    border: 1px solid #4a7fc4;
    display: flow-root;
    padding: 10px 12px;
}

.prototype-card .prototype-image {
    float: left;
    margin: 0 12px 8px 0;
    width: 50%;
}

.prototype-card-details { display: block; }

.prototype-media {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: #0b1020;
    color: #8fb5e8;
    display: flex;
    font-family: "Courier New", monospace;
    font-size: 10px;
    justify-content: center;
    letter-spacing: 1px;
    text-align: center;
}

.prototype-media video { height: 100%; width: 100%; }
.prototype-media iframe { border: 0; height: 100%; width: 100%; }
.prototype-media img { display: block; height: 100%; object-fit: contain; width: 100%; }
.prototype-video {
    clear: both;
    margin-top: 10px;
    width: 100%;
}
.prototype-card h3 { font-size: 13px; margin: 0 0 4px; text-transform: none; }
.prototype-card p { margin: 0 0 7px; }

.prototype-meta {
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
}

.prototype-credits {
    color: #64748b;
    font-size: 10px;
}

.prototype-actions { color: #64748b; font-size: 11px; }

@media (max-width: 600px) {
    .prototype-media { width: 100%; }
    .prototype-card .prototype-image { width: 50%; }
    .prototype-search-label { font-size: 13px; }
    .prototype-search { font-size: 16px; }
    .prototype-summary h3 { font-size: 13px; }
    .prototype-thumbnail { width: 78.22px; }
}