.roast-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,480px);margin-top:clamp(26px,6vh,64px)}.roast-download{box-sizing:border-box;min-width:0;display:flex;flex-direction:column;gap:5px;padding:13px 16px;border:1px solid #353835;border-radius:12px;background:#191c19;color:#f4f4f5;text-decoration:none;line-height:1.35}.roast-download small,.roast-download-note{color:#aeb4af;font-size:12px}.roast-download:hover:is(a),.roast-download:focus-visible{border-color:#48ca7a;background:#202a22}.roast-download-pending{color:#c4c8c4;background:#171717}.roast-download-note{grid-column:1/-1}.roast-download-page{margin:0;background:#0a0a0a;color:#f4f4f5;font-family:system-ui,sans-serif}.roast-download-page main{box-sizing:border-box;max-width:720px;margin:clamp(24px,10vh,96px) auto;padding:clamp(24px,5vw,56px);background:#111;border-radius:24px}.roast-download-page main>a{display:inline-block;margin-top:24px;color:#66d68d}.roast-download-page .roast-downloads{margin-top:24px}@media(max-width:400px){.roast-download{padding:11px;font-size:14px}.roast-download-page main{margin:16px}}
body:has(.roast-cover:not([hidden])) .app-header { display: none; }
body:has(.roast-cover:not([hidden])) .app-main { width: 100%; max-width: none; padding: 0; }
.roast-cover:not([hidden]) {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  width: min(100%, 560px);
  margin-inline: auto;
  background: #0e1110;
  border-inline: 1px solid #272d29;
}
.roast-cover-art {
  display: grid;
  align-items: center;
  padding: clamp(24px, 8vw, 56px);
  background: radial-gradient(ellipse at 16% 60%, #20392c, transparent 62%),
              linear-gradient(165deg, #171d19, #090b0a 77%);
}
.roast-cover-title > span {
  font-size: clamp(42px, 10vw, 70px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.055em;
}
.roast-cover-title h1 {
  font-size: clamp(32px, 8vw, 55px);
  margin: 18px 0 12px;
  line-height: 1.1;
}
.roast-cover-title p { color: #b1bab3; margin: 0; }
.roast-cover-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: #111612;
  border-top: 1px solid #2a332d;
}
.roast-cover-actions summary, .roast-cover-actions button {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
}
.roast-cover-actions summary {
  display: grid;
  place-items: center;
  border: 1px solid #3a453d;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}
.roast-cover-help {
  position: absolute;
  inset: auto 14px calc(100% + 8px);
  padding: 16px;
  background: #1b231e;
  border: 1px solid #3a453d;
  border-radius: 12px;
}
.roast-cover-help a { display: block; margin-top: 10px; color: #84dfa2; }