/* White, centred, one grid of previews. Nothing here that is not a picture of
   an app, its name, or a way to find it faster. */

:root{
  --ink:#111112;
  --soft:#8a8a90;
  --line:#ececee;
  --tile:#f4f4f5;
}

*{box-sizing:border-box}
/* A display rule beats the hidden attribute, so say it once, loudly. */
[hidden]{display:none!important}
html{background:#fff}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font:400 16px/1.5 Inter,ui-sans-serif,-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;gap:16px;
  padding:34px 40px 0;
}
h1{
  margin:0;
  font:700 27px/1 Inter,sans-serif;
  letter-spacing:-.035em;
}
header button{
  margin-left:auto;
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border:0;border-radius:12px;
  background:#f2f2f3;color:var(--ink);
  cursor:pointer;transition:background .16s;
}
header button:hover{background:#e7e7e9}
header button svg{width:18px;height:18px}

.find{padding:26px 40px 0;display:flex;justify-content:center}
.find input{
  width:min(440px,100%);
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;color:var(--ink);
  font:400 15px Inter,sans-serif;
  outline:none;
}
.find input::placeholder{color:#b0b0b6}
.find input:focus{border-color:#c6c6cc}
.find input::-webkit-search-cancel-button{display:none}

/* ---------- grid ---------- */
main{
  max-width:1120px;
  margin:0 auto;
  padding:56px 40px 120px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:40px 28px;
  justify-items:stretch;
}

a{
  display:block;
  color:inherit;
  text-decoration:none;
}

.shot{
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  background:var(--tile);
  border:1px solid var(--line);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
}
a:hover .shot{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(17,17,18,.11);
}
a:focus-visible .shot{outline:2px solid var(--ink);outline-offset:2px}

.shot img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top left;
  display:block;
}
/* No screenshot yet (Claude cannot sign in to these). A calm label beats a
   broken frame, and beats a picture of somebody else's login box. */
.shot.none{display:grid;place-items:center;padding:20px}
.shot.none span{
  font:600 17px/1.25 Inter,sans-serif;letter-spacing:-.015em;color:#c2c2c8;text-align:center;
}

a b{
  display:block;
  margin:14px 0 2px;
  font:600 15px/1.3 Inter,sans-serif;
  letter-spacing:-.01em;
}
a span{
  display:block;
  font:400 14px/1.4 Inter,sans-serif;
  color:var(--soft);
}

.none-msg{
  text-align:center;color:var(--soft);font-size:15px;
  padding:0 40px 80px;margin:0;
}

@media (max-width:640px){
  header{padding:26px 22px 0}
  .find{padding:20px 22px 0}
  main{padding:34px 22px 80px;gap:30px 18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}