:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101417; color: #edf6f0; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top right, #194d3d, transparent 32rem), #101417; }
main { max-width: 1320px; margin: auto; padding: 4rem 1.25rem; }
header { max-width: 720px; margin-bottom: 2.5rem; }
h1 { margin: .15rem 0; font-size: clamp(3rem, 9vw, 6rem); letter-spacing: -.08em; }
h2 { margin: .15rem 0; font-size: 1.05rem; line-height: 1.25; }
.eyebrow, .console { color: #7ae6ad; font-size: .72rem; letter-spacing: .12em; font-weight: 750; text-transform: uppercase; }
.controls { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(190px, .27fr); padding: 1rem; background: #192020; border: 1px solid #2c3936; border-radius: 16px; }
label { display: grid; gap: .4rem; color: #b9c8c0; font-size: .85rem; }
input, select { width: 100%; border: 1px solid #52645c; border-radius: 9px; padding: .75rem; background: #101417; color: inherit; font: inherit; }
#result-count { color: #b9c8c0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1rem; }
.card { padding: 0; overflow: hidden; border: 1px solid #2c3936; border-radius: 12px; background: #192020; color: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: #7ae6ad; outline: none; }
.cover { aspect-ratio: 3 / 4; display: grid; place-items: center; background: #26312e; color: #9eb1a7; font-size: .8rem; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: .8rem; min-height: 120px; }.card-body p { margin: .3rem 0 0; color: #b9c8c0; font-size: .8rem; }.console { margin: 0 !important; }
.notice { grid-column: 1 / -1; color: #b9c8c0; }
dialog { width: min(760px, calc(100% - 2rem)); max-height: 85vh; padding: 1.5rem; color: inherit; background: #192020; border: 1px solid #52645c; border-radius: 16px; }dialog::backdrop { background: rgb(0 0 0 / .72); }dialog article { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1.5rem; }.detail-cover { width: 100%; max-height: 320px; object-fit: contain; background: #101417; }.close { float: right; border: 0; background: transparent; color: inherit; font-size: 2rem; cursor: pointer; }.path { color: #9eb1a7; font-family: ui-monospace, monospace; font-size: .8rem; overflow-wrap: anywhere; }dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; }dt { color: #7ae6ad; }dd { margin: 0; }
@media (max-width: 580px) { main { padding-top: 2rem; }.controls, dialog article { grid-template-columns: 1fr; }.detail-cover { max-width: 180px; } }