/* The app's own chassis, LCD and green; the site's type and geometry.
 * Always dark like Hourly Beep's interface, with the sound library on LCD. */
.hb-page { --hb-bg:#111111; --hb-ink:#f2f2ee; --hb-quiet:#b1b1aa; --hb-green:#8cf28c; --hb-lcd:#9eb38c; --hb-lcd-ink:#142114; color-scheme:dark; }
html:has(.hb-page), body.hb-page, .hb-page #siteWrapper, .hb-page #page { background:var(--hb-bg); }
.hb-page #header { position:relative; }
.hb-page .header .header-background, .hb-page .header-menu .header-menu-bg { background:var(--hb-bg)!important; }
.hb { color:var(--hb-quiet); font:400 1rem/1.65 "ibm-plex-mono",monospace; letter-spacing:-.04em; -webkit-font-smoothing:antialiased; }
.hb *, .hb *::before, .hb *::after { box-sizing:border-box; }
.hb [hidden] { display:none!important; }
.hb-wrap { width:88%; max-width:1320px; margin-inline:auto; }
.hb-page .hb h1, .hb-page .hb h2, .hb-page .hb h3 { font-family:"din-condensed-web","Barlow Condensed",sans-serif; font-weight:400; letter-spacing:0; color:var(--hb-ink); margin:0; text-transform:none; }
.hb-page .hb h1 { font-size:clamp(3.8rem,7vw,6.25rem); line-height:1.02; }
.hb-page .hb h2 { font-size:clamp(3rem,4.6vw,4.5rem); line-height:1.06; }
.hb-page .hb h3 { font-size:1.8rem; line-height:1.2; }
.hb-page .hb p { font:inherit; letter-spacing:inherit; margin:0; }
.hb-page .hb a { color:inherit; }
.hb-page .hb a:focus-visible, .hb button:focus-visible { outline:3px solid var(--hb-green); outline-offset:5px; }
.hb-hero { display:grid; grid-template-columns:1.25fr 1fr; gap:8%; align-items:center; padding-block:30px 90px; }
.hb-intro { padding-block:30px; max-width:590px; }
.hb-page .hb .hb-name { color:var(--hb-ink); display:flex; gap:16px; align-items:center; margin-bottom:30px; font-size:1.15rem; }
.hb-name img { width:48px; height:48px; }
.hb-page .hb .hb-lede { color:var(--hb-ink); font-size:1.2rem; line-height:1.6; margin:28px 0 18px; max-width:38ch; }
.hb-intro > p { max-width:46ch; }
.hb-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin:32px 0 14px; }
.hb-page .hb .hb-store { display:block; flex:none; width:180px; aspect-ratio:3/1; line-height:0; }
.hb-page .hb .hb-store img { display:block; width:100%; height:100%; }
.hb-page .hb .hb-store:focus-visible { outline:3px solid var(--hb-green); outline-offset:5px; }
.hb-page .hb .hb-btn { display:inline-flex; align-items:center; justify-content:center; padding:1rem 3.1rem; border-radius:7.2px; background:var(--hb-green); color:#142114; text-decoration:none; font:400 1.5rem/1.12 "din-condensed-web","Barlow Condensed","Arial Narrow",sans-serif; letter-spacing:0; white-space:nowrap; transition:background .15s; }
.hb-page .hb .hb-btn:hover { background:#a8f6a8; }
.hb-page .hb .hb-listen { text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; font-size:.9rem; }
.hb-listen span { margin-left:5px; }
.hb-page .hb .hb-small { font-size:.8rem; }
.hb-screen { margin:0 auto; width:min(100%,350px); }
.hb-screen img { display:block; width:100%; height:auto; }
.hb-library { color:var(--hb-lcd-ink); background:var(--hb-lcd); padding-block:70px 55px; scroll-margin-top:24px; color-scheme:light; }
.hb-page .hb .hb-library h2, .hb-page .hb .hb-library h3 { color:var(--hb-lcd-ink); }
.hb-library-head { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:8%; margin-bottom:38px; }
.hb-library-head > p { max-width:46ch; }
.hb-page .hb .hb-kicker { font-size:.82rem; margin-bottom:12px; }
.hb-filters { display:flex; gap:8px; flex-wrap:wrap; }
.hb-filter { cursor:pointer; background:transparent; border:1px solid #546849; border-radius:5px; color:var(--hb-lcd-ink); padding:11px 22px; min-height:46px; font:inherit; font-size:.9rem; letter-spacing:inherit; }
.hb-filter:hover { background:#8da37a; }
.hb-filter[aria-pressed="true"] { color:var(--hb-lcd); background:var(--hb-lcd-ink); border-color:var(--hb-lcd-ink); }
.hb-page .hb .hb-library :focus-visible { outline-color:var(--hb-lcd-ink); }
.hb-page .hb .hb-status { font-size:.8rem; min-height:1.65em; margin:22px 0 20px; }
.hb-group { margin-bottom:24px; }
.hb-page .hb .hb-group h3 { font-size:1.35rem; margin-bottom:14px; }
.hb-group ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; padding:0; margin:0; list-style:none; }
.hb-page .hb .hb-sound { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; min-height:68px; padding:12px 18px; background:#b0c19f; border-radius:5px; color:var(--hb-lcd-ink); text-decoration:none; transition:background .15s; }
.hb-page .hb .hb-sound:hover { background:#becdb0; }
.hb-page .hb .hb-sound[aria-pressed="true"] { background:#142114; color:#c4d2b7; }
.hb-play { width:34px; height:34px; display:grid; place-items:center; }
.hb-play svg { display:block; width:24px; height:24px; fill:currentColor; }
.hb-play .hb-icon-stop, .hb-sound[aria-pressed="true"] .hb-icon-play { display:none; }
.hb-sound[aria-pressed="true"] .hb-icon-stop { display:block; }
.hb-sound-name { font-size:.95rem; }
.hb-sound-note { font-size:.7rem; text-align:right; max-width:9ch; line-height:1.4; }
.hb-page .hb .hb-credit { font-size:.72rem; max-width:100ch; margin-top:28px; line-height:1.65; }
.hb-details { display:grid; grid-template-columns:1fr 1fr; gap:8%; padding-block:90px; }
.hb-page .hb .hb-details > div > p { max-width:46ch; margin-top:24px; }
.hb-offer h3:not(:first-child) { margin-top:28px; }
.hb-page .hb .hb-offer > p { margin-top:12px; }
.hb-offer .hb-store { margin-top:28px; }
.hb-page .hb .hb-offer .hb-small { margin-top:18px; }
.hb-small a { text-decoration:underline; text-underline-offset:3px; }
.hb-foot { border-top:1px solid #30302d; padding-block:40px; }
.hb-foot .hb-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hb-page .hb a.hb-foot-mark { font-family:var(--site-title-font-font-family,"Lily Script One"),cursive; font-size:2rem; line-height:1; letter-spacing:0; color:var(--hb-ink); text-decoration:none; }
.hb-social { list-style:none; margin:0; padding:0; display:flex; gap:14px; }
.hb-social li { margin:0; }
.hb-page .hb .hb-social a { display:block; width:24px; height:24px; color:#81817a; text-decoration:none; transition:color .15s; }
.hb-page .hb .hb-social a:hover, .hb-page .hb .hb-social a:focus-visible { color:var(--hb-ink); }
.hb-social svg { display:block; width:100%; height:100%; fill:currentColor; }
@media(max-width:1000px) { .hb-hero { gap:5%; grid-template-columns:1.2fr 1fr; } .hb-screen { width:300px; max-width:100%; } .hb-actions { gap:20px; } .hb-sound-note { font-size:.65rem; } }
@media(max-width:767px) {
  .hb-wrap { width:88%; }
  .hb-hero { grid-template-columns:1fr; gap:24px; padding-block:4px 50px; }
  .hb-intro { padding:12px 0 0; max-width:550px; }
  .hb-page .hb h1 { font-size:clamp(3.6rem,11vw,5rem); }
  .hb-page .hb .hb-name { margin-bottom:24px; }
  .hb-page .hb .hb-lede { margin-top:22px; }
  .hb-screen { width:330px; }
  .hb-library { padding-block:48px 38px; }
  .hb-library-head, .hb-details { grid-template-columns:1fr; gap:24px; }
  .hb-library-head { margin-bottom:26px; }
  .hb-group ul { grid-template-columns:1fr; gap:8px; }
  .hb-filter { padding:10px 15px; font-size:.85rem; }
  .hb-page .hb .hb-sound { padding:12px; gap:10px; }
  .hb-details { padding-block:52px; gap:36px; }
  .hb-foot .hb-wrap { flex-direction:column; align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .hb *, .hb *::before, .hb *::after { transition:none!important; scroll-behavior:auto!important; } }

.hb-duo { padding-top:80px; }
.hb-duo-heading { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:end; }
.hb-duo-heading > p { max-width:46ch; }
.hb-duo-screen { width:100%; max-width:900px; margin:36px auto 0; }
.hb-duo-screen img { display:block; width:100%; height:auto; }
@media(max-width:767px) {
  .hb-duo { padding-top:48px; }
  .hb-duo-heading { grid-template-columns:1fr; gap:24px; }
  .hb-duo-screen { margin-top:24px; }
}