.view--home {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 58px - 100px);
}

.home {
  width: min(720px, 100%);
  text-align: center;
}

.home-hero { display: flex; flex-direction: column; align-items: center; }
.home-hero__wing {
  height: 132px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 18px rgba(255, 246, 170, .35));
  animation: wing-float 5s ease-in-out infinite;
}
@keyframes wing-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.home-hero__title {
  margin: 0;
  font-size: clamp(42px, 8.4vw, 80px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--cream);
  text-shadow: 0 0 28px rgba(255, 232, 190, .45), 0 0 2px rgba(255, 240, 210, .8);
}
.home-hero__sub {
  margin: 12px 0 34px;
  color: var(--cream-dim);
  font-size: 15px;
  letter-spacing: .32em;
}

.home-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(10, 15, 18, .62);
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, .24), 0 18px 50px rgba(0, 0, 0, .3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .25s;
}
.home-search:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, .7), 0 0 34px rgba(255, 236, 190, .14), 0 18px 50px rgba(0, 0, 0, .3); }
.home-search__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 16px;
  outline: none;
}
.home-search__input::placeholder { color: rgba(255, 244, 220, .4); }
.home-search__btn { min-height: 46px; padding: 0 34px; font-size: 16px; }
.home-search.is-shake { animation: shake .36s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.home-hint {
  min-height: 22px;
  margin: 12px 18px 0;
  color: var(--cream-faint);
  font-size: 13px;
  word-break: break-all;
}
.home-hint .mono { font-size: 12px; }
.home-hint.is-ok { color: var(--cream-dim); }
.home-hint.is-ok .mono { color: var(--gold); }
.home-hint.is-error { color: var(--pink); }

.home-links { margin-top: 26px; }

.home-recent { margin-top: 40px; text-align: left; }
.home-recent__title { margin: 0 4px 10px; color: var(--cream-faint); font-size: 13px; letter-spacing: .1em; }
.home-recent__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.home-recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: var(--panel);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 220, .08);
  transition: box-shadow .2s, transform .2s;
}
.home-recent__item:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, .4); transform: translateY(-1px); }
.home-recent__thumb { flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: var(--well); }
.home-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-recent__text { display: flex; flex-direction: column; min-width: 0; }
.home-recent__name { overflow: hidden; color: var(--cream); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.home-recent__price { color: var(--gold); font-size: 13px; }

.home-keys { margin-top: 36px; color: var(--cream-faint); font-size: 12px; }
.home-keys .kbd { margin-right: 4px; }

@media (max-width: 640px) {
  .home-hero__sub { letter-spacing: .2em; margin-bottom: 26px; }
  .home-search__input { height: 42px; padding: 0 12px; font-size: 15px; }
  .home-search__btn { min-height: 42px; padding: 0 22px; }
  .home-keys { display: none; }
}