:root {
  font-family: ui-rounded, "Arial Rounded MT Bold", Inter, system-ui, sans-serif;
  color: #30275f;
  background: #6d5be7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgb(180 151 255 / 70%) 0, transparent 31rem),
    radial-gradient(circle at 90% 20%, rgb(81 213 219 / 32%) 0, transparent 34rem),
    linear-gradient(155deg, #8069f0 0%, #6655e1 48%, #806be9 100%);
  background-attachment: fixed;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 96px; }
.hero { display: flex; justify-content: space-between; gap: 34px; align-items: flex-end; margin-bottom: 36px; color: #fff; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; font-size: 28px; font-weight: 950; letter-spacing: -.04em; }
.brand-mark { display: grid; width: 45px; height: 45px; place-items: center; border: 3px solid rgb(255 255 255 / 76%); border-radius: 15px; background: rgb(255 255 255 / 16%); box-shadow: inset 0 -4px 0 rgb(58 42 141 / 18%); font-size: 24px; }
.eyebrow { margin: 0 0 10px; color: #e8e1ff; font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; max-width: 800px; font-size: clamp(44px, 7vw, 82px); line-height: .94; letter-spacing: -.055em; }
h1 span { color: #bdf5ec; }
.intro { max-width: 600px; margin: 24px 0 0; color: #eeeaff; font-size: 17px; font-weight: 650; line-height: 1.55; }
.status { flex: none; display: flex; gap: 9px; align-items: center; padding: 11px 16px; border: 2px solid rgb(255 255 255 / 30%); border-radius: 999px; color: #fff; background: rgb(68 47 158 / 46%); box-shadow: inset 0 -3px 0 rgb(43 24 125 / 13%); font-size: 13px; font-weight: 800; backdrop-filter: blur(14px); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffd669; box-shadow: 0 0 13px currentColor; }
.status.is-ready .status-dot { background: #7ce6c4; }
.status.is-error .status-dot { background: #ff898f; }
.offline-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; margin: 0 0 28px; padding: 22px; border: 4px solid rgb(255 255 255 / 72%); border-radius: 32px; color: #332764; background: linear-gradient(135deg, #fff9d8, #fffdf1 54%, #d8fff4); box-shadow: 0 12px 0 rgb(73 51 161 / 18%), 0 24px 42px rgb(54 34 137 / 18%); }
.offline-icon { display: grid; width: 66px; height: 66px; place-items: center; border: 3px solid #f5c94b; border-radius: 22px; color: #624b00; background: linear-gradient(145deg, #ffe887, #ffc94f); box-shadow: inset 0 -7px 0 rgb(179 112 0 / 14%), 0 7px 0 #e3b636; font-size: 32px; font-weight: 950; }
.offline-kicker { margin: 0 0 5px; color: #7865a3; font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.offline-copy h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.offline-copy > p:last-of-type { max-width: 690px; margin: 7px 0 0; color: #6d6687; font-weight: 650; line-height: 1.4; }
.offline-button { display: flex; min-width: 238px; height: 58px; justify-content: space-between; align-items: center; gap: 15px; padding: 0 18px; border: 3px solid #9be5d4; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #17bba5, #079880); box-shadow: inset 0 -6px 0 rgb(0 93 80 / 18%), 0 5px 0 #64cbbb; cursor: pointer; font-weight: 950; }
.offline-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.offline-button:disabled { border-color: #d9d2e6; color: #857d97; background: #e9e4ef; box-shadow: inset 0 -5px 0 #d7d0df; cursor: wait; transform: none; }
.offline-button.is-complete { border-color: #e7be37; color: #624b00; background: linear-gradient(145deg, #ffe77a, #f6c83e); box-shadow: inset 0 -6px 0 rgb(178 110 0 / 13%), 0 5px 0 #dbae2e; }
.offline-progress { margin-top: 14px; }
.progress-track { height: 13px; overflow: hidden; border: 2px solid #ddd1ff; border-radius: 999px; background: #ece6ff; }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8269ed, #31cbb4, #ffd158); transition: width .25s ease; }
.progress-details { display: flex; justify-content: space-between; gap: 16px; margin-top: 7px; color: #6d6687; font-size: 12px; font-weight: 750; }
.progress-details strong { color: #4b3b85; }
.toolbar { position: sticky; top: 14px; z-index: 5; display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; padding: 11px; border: 3px solid rgb(255 255 255 / 52%); border-radius: 25px; background: rgb(251 249 245 / 90%); box-shadow: 0 14px 0 rgb(69 47 156 / 14%), 0 25px 50px rgb(49 30 135 / 24%); backdrop-filter: blur(18px); }
.search input { width: 100%; height: 48px; padding: 0 17px; border: 2px solid #e1d9ff; outline: 0; border-radius: 16px; color: #382e6d; background: #f2eeff; font-weight: 750; }
.search input:focus { border-color: #8772ed; box-shadow: 0 0 0 4px rgb(135 114 237 / 16%); }
.filters { display: flex; padding: 4px; border-radius: 16px; background: #e8e1ff; }
.filter, .refresh { border: 0; border-radius: 12px; color: #665995; background: transparent; cursor: pointer; font-weight: 850; }
.filter { padding: 0 16px; }
.filter.is-active { color: #fff; background: #705be2; box-shadow: inset 0 -4px 0 rgb(60 39 151 / 20%); }
.refresh { padding: 0 16px; }
.refresh:hover { color: #3c2d7d; background: #eee9ff; }
.summary { margin: 30px 4px 17px; color: #eeeaff; font-size: 14px; font-weight: 850; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { --card-hue: 180; display: flex; min-height: 292px; flex-direction: column; padding: 12px; border: 4px solid rgb(255 255 255 / 72%); border-radius: 32px; color: #31285e; background: #fffefa; box-shadow: 0 12px 0 rgb(73 51 161 / 18%), 0 24px 42px rgb(54 34 137 / 18%); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 0 rgb(73 51 161 / 16%), 0 30px 50px rgb(54 34 137 / 24%); }
.card.is-disabled { opacity: .62; filter: saturate(.65); }
.card-top { position: relative; display: grid; min-height: 116px; place-items: center; padding: 12px; border-radius: 23px; background: linear-gradient(145deg, hsl(var(--card-hue) 78% 76%), hsl(calc(var(--card-hue) + 35) 85% 62%)); box-shadow: inset 0 -7px 0 rgb(47 31 115 / 10%); overflow: hidden; }
.card-top::before, .card-top::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / 24%); }
.card-top::before { width: 130px; height: 130px; top: -68px; left: -25px; }
.card-top::after { width: 92px; height: 92px; right: -30px; bottom: -42px; }
.emoji { position: relative; z-index: 1; display: flex; width: 108px; height: 76px; flex: none; flex-direction: row; justify-content: center; align-items: center; padding: 0 8px; border: 4px solid rgb(255 255 255 / 72%); border-radius: 25px; background: rgb(255 255 255 / 42%); box-shadow: inset 0 -6px 0 rgb(62 42 143 / 12%), 0 10px 22px rgb(61 41 145 / 18%); font-size: 36px; line-height: 1; letter-spacing: 3px; text-align: center; text-indent: 3px; white-space: nowrap; }
.badge { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 7px 10px; border: 2px solid rgb(255 255 255 / 56%); border-radius: 999px; color: #155c50; background: #a8efd9; font-size: 10px; font-weight: 950; text-transform: uppercase; }
.badge.is-missing { color: #843c5b; background: #ffc1d5; }
.name { margin: 21px 10px 7px; font-size: 27px; letter-spacing: -.035em; }
.description { margin: 0 10px; color: #6d6687; font-weight: 620; line-height: 1.45; }
.play { display: flex; width: 100%; height: 52px; justify-content: space-between; align-items: center; margin-top: auto; padding: 0 17px; border: 3px solid #9be5d4; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #17bba5, #079880); box-shadow: inset 0 -6px 0 rgb(0 93 80 / 18%), 0 5px 0 #64cbbb; font-weight: 950; cursor: pointer; }
.play:hover { filter: brightness(1.05); transform: translateY(-1px); }
.play:disabled { border-color: #ddd6ec; color: #8b839d; background: #e9e4ef; box-shadow: inset 0 -5px 0 #d7d0df; cursor: not-allowed; }
.empty { grid-column: 1 / -1; padding: 70px 20px; border: 3px dashed rgb(255 255 255 / 50%); border-radius: 28px; color: #fff; text-align: center; font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (max-width: 860px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .offline-card { grid-template-columns: auto 1fr; }
  .offline-button { grid-column: 1 / -1; width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: 1fr auto; }
  .refresh { grid-column: 1 / -1; height: 40px; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 22px, 1180px); padding: 28px 0 70px; }
  .brand { margin-bottom: 18px; }
  h1 { font-size: clamp(42px, 13vw, 62px); }
  .offline-card { grid-template-columns: 1fr; padding: 18px; border-radius: 28px; }
  .offline-icon { width: 56px; height: 56px; border-radius: 18px; }
  .offline-button { grid-column: auto; min-width: 0; }
  .grid { grid-template-columns: 1fr; gap: 17px; }
  .toolbar { position: static; grid-template-columns: 1fr; border-radius: 23px; }
  .filters { height: 44px; }
  .filter { flex: 1; }
  .refresh { grid-column: auto; }
  .card { min-height: 282px; border-radius: 29px; }
  .emoji { width: 112px; }
}