:root{
  --ghmag-ink:#1b1f3b;
  --ghmag-ink-soft:#2c3152;
  --ghmag-muted:#6b6f86;
  --ghmag-line:#e6e3db;
  --ghmag-soft:#f4f2ec;
  --ghmag-paper:#fbfaf7;
  --ghmag-accent:#1b1f3b;
}
.ghmag-catalog,.ghmag-catalog *{box-sizing:border-box}
.ghmag-catalog{width:100%;font-family:inherit;color:var(--ghmag-ink)}
.ghmag-catalog [hidden]{display:none!important}
.ghmag-catalog__header{margin:0 0 24px}
.ghmag-catalog .ghmag-catalog__title{margin:0 0 8px;font-size:clamp(22px,3vw,30px);line-height:1.6;color:var(--ghmag-ink);overflow-wrap:anywhere}
.ghmag-catalog__description{margin:0;color:var(--ghmag-muted);font-size:15px;line-height:1.9;white-space:pre-line;overflow-wrap:anywhere}
.ghmag-toolbar{display:flex;flex-direction:column;gap:14px;margin:0 0 22px}
.ghmag-search-row{display:flex;align-items:stretch;gap:10px}
.ghmag-search{display:block;flex:1;min-width:0}
.ghmag-catalog .ghmag-search-submit{appearance:none;flex-shrink:0;min-height:48px;border:1px solid var(--ghmag-ink);border-radius:16px;padding:10px 20px;background:var(--ghmag-ink);color:#fff;font:inherit;font-weight:700;cursor:pointer;line-height:1.5}
.ghmag-catalog .ghmag-search-submit:hover{background:var(--ghmag-ink-soft);border-color:var(--ghmag-ink-soft)}
.ghmag-catalog .ghmag-search-submit:focus-visible{outline:3px solid var(--ghmag-ink);outline-offset:3px}
.ghmag-search input{
  width:100%;min-height:48px;border:1px solid var(--ghmag-line);border-radius:16px;
  background:#fff;padding:12px 16px;font:inherit;color:var(--ghmag-ink);outline:none;
  box-shadow:0 8px 24px rgba(27,31,59,.04)
}
.ghmag-search input:focus{border-color:#c9c4d8;box-shadow:0 0 0 3px rgba(27,31,59,.08)}
.ghmag-cats{display:flex;flex-wrap:wrap;gap:8px}
.ghmag-chip{
  appearance:none;border:1px solid var(--ghmag-line);background:#fff;color:var(--ghmag-ink-soft);
  min-height:38px;padding:7px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer
}
.ghmag-chip.is-active,.ghmag-chip[aria-pressed="true"]{background:var(--ghmag-ink);border-color:var(--ghmag-ink);color:#fff}
.ghmag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ghmag-card{background:#fff;border:1px solid var(--ghmag-line);border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(27,31,59,.05);display:flex;flex-direction:column;min-width:0}
.ghmag-card__cover{display:block;aspect-ratio:3/4;background:linear-gradient(160deg,#f7f6f2,#eeeae3);text-decoration:none;overflow:hidden}
.ghmag-card__cover img{width:100%;height:100%;object-fit:cover;display:block}
.ghmag-card__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;background:var(--ghmag-ink);font-size:42px;font-weight:800}
.ghmag-card__body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ghmag-card__cats{color:var(--ghmag-muted);font-size:12px;line-height:1.6}
.ghmag-card h3{margin:0;font-size:15px;line-height:1.7;font-weight:800}
.ghmag-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:auto;border-radius:12px;padding:8px 14px;text-decoration:none!important;font-weight:800;background:var(--ghmag-ink);color:#fff!important}
.ghmag-btn--muted{background:var(--ghmag-soft);color:var(--ghmag-muted)!important;cursor:default}
.ghmag-empty,.ghmag-none{text-align:center;padding:36px 18px;border:1px dashed var(--ghmag-line);border-radius:20px;background:var(--ghmag-paper);color:var(--ghmag-ink)}
.ghmag-empty p,.ghmag-none{color:var(--ghmag-muted);margin:8px 0 0}
.ghmag-notice{padding:14px 16px;border-radius:14px;background:var(--ghmag-soft);color:var(--ghmag-ink);line-height:1.8}
.ghmag-catalog .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(min-width:720px){
  .ghmag-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .ghmag-card h3{font-size:16px}
}
@media(min-width:1080px){
  .ghmag-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:720px) and (max-width:1079px){
  .ghmag-catalog--latest .ghmag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:419px){
  .ghmag-grid{grid-template-columns:1fr}
  .ghmag-card{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch}
  .ghmag-card__cover{aspect-ratio:auto;min-height:148px}
  .ghmag-card__body{padding:12px}
  .ghmag-card h3{font-size:14px}
}
