/* Burrbit test bench — quiet workshop styling; the pedal is the show. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #efece5;
  color: #33424e;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }

main { max-width: 960px; margin: 0 auto; padding: 40px 20px 30px; }
.bench {
  background: #fbf6ea;
  border: 2px solid #1d3a4a;
  border-radius: 18px;
  padding: 34px 30px 22px;
}

.masthead { text-align: center; margin-bottom: 26px; }
.eyebrow { font-size: 11px; letter-spacing: .28em; opacity: .65; }
.masthead h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px; letter-spacing: .04em; color: #1d3a4a; margin: 6px 0 8px;
}
.masthead h1 span { font-style: italic; font-weight: normal; font-size: 26px; color: #7a2e1f; }
.deck { max-width: 620px; margin: 0 auto; font-style: italic; color: #4a4238; }

.rig { display: grid; gap: 30px; grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; }
@media (max-width: 720px) { .rig { grid-template-columns: 1fr; justify-items: center; } }

.pedal { position: relative; width: 100%; max-width: 300px; }
.pedal .bb-face { display: block; border-radius: 10px; box-shadow: 0 14px 34px rgba(29, 58, 74, .35); }

#start-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29, 58, 74, .45); border-radius: 10px; backdrop-filter: blur(2px);
}
#start {
  font: bold 18px/1.3 Georgia, serif; letter-spacing: .12em;
  padding: 22px 26px; border-radius: 50%;
  border: 3px double #fbf6ea; background: #7a2e1f; color: #fbf6ea; cursor: pointer;
}
#start:hover { background: #8f3a28; }

.deskside { min-width: 0; }
.how { font-size: 14.5px; color: #4a4238; margin-bottom: 18px; }
.records-head { font-weight: bold; letter-spacing: .08em; font-size: 13px; margin-bottom: 8px; }

.row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.row button {
  font: bold 11px/1 -apple-system, sans-serif; letter-spacing: .08em;
  padding: 9px 12px; cursor: pointer;
  background: #efe6d0; color: #2b2118;
  border: 1.5px solid #2b2118; border-radius: 4px;
  box-shadow: 2px 2px 0 #2b211833;
}
.row button:hover { background: #f7efdd; }
.row button.on { background: #7a2e1f; color: #fbf6ea; border-color: #7a2e1f; }
.row button.loading { opacity: .5; cursor: wait; }
.vol { font: bold 11px/1 -apple-system, sans-serif; letter-spacing: .08em; display: flex; gap: 6px; align-items: center; }
.vol input { accent-color: #7a2e1f; width: 90px; }
#mic {
  font: 12px -apple-system, sans-serif; max-width: 220px;
  padding: 6px; border: 1.5px solid #2b2118; border-radius: 4px; background: #efe6d0;
}
.hint { font-size: 12.5px; font-style: italic; opacity: .7; }

.fine { text-align: center; font-size: 11.5px; opacity: .55; margin-top: 26px; }
footer { text-align: center; padding: 18px 0 34px; font-size: 13px; opacity: .75; }
footer a { text-decoration: none; }