/* ButtonBass page shell: shared navigation, homepage spacing and content panels.
   Studio controls remain scoped by their existing classes; no cube engine CSS. */
body {
  --primary-surface:#2a2a33;
  --border-color:#404048;
  --text-muted-color:#a0a0a8;
  background:radial-gradient(900px 520px at 36% 9%,rgba(0,255,70,.1),transparent 66%),radial-gradient(720px 520px at 92% 28%,rgba(56,217,255,.045),transparent 68%),#08090c;
}
#lofiApp {width:min(1220px,100%);max-width:1220px;margin:0 auto;padding:22px 18px 0;}
#lofiApp>.intro {padding:4px 0 22px;gap:24px;align-items:flex-end;}
#lofiApp>.intro .eyebrow {color:#39ff5a;font:700 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:2px;}
#lofiApp>.intro h1 {color:#f3f4f6;font:900 clamp(29px,4vw,50px)/1.05 Inter,system-ui,sans-serif;letter-spacing:-2px;text-transform:uppercase;}
#lofiApp>.intro h1 em {color:transparent;font-style:normal;-webkit-text-stroke:1px #ffffff9c;}
#lofiApp>.intro .subtitle {color:#858b98;font:13px/1.55 system-ui,sans-serif;margin-top:12px;}
#lofiApp>.intro .intro-note {font:13px/1.55 system-ui,sans-serif;text-align:right;color:#858b98;}
#lofiApp .studio {border-color:#313642;box-shadow:0 26px 80px #0007,inset 0 1px #ffffff0a;}
/* Use the same content panel geometry as newstyles2.css without its global
   drum-machine control resets leaking into the lo-fi instrument. */
.text-content-area,.homepage-content,.comments-section {
  box-sizing:border-box;width:98vw;margin:30px auto;padding:20px 30px;
  background:var(--primary-surface);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 5px 10px #0003;
  color:#e8e8e8;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
.homepage-content {padding:20px;margin-top:10px;}
.lofi-related {padding-top:0;padding-bottom:0;}
.lofi-related #bb-related-apps {margin:24px auto;}
.below.text-content-area {display:block;}
.below.text-content-area h2 {font:700 21px/1.4 system-ui,sans-serif;color:#a4afff;text-align:center;margin:0 0 20px;}
.below.text-content-area h2 br {display:none;}
.below.text-content-area .eyebrow {text-align:center;margin-bottom:14px;}
.below.text-content-area p:not(.eyebrow) {max-width:none;font:14px/1.6 system-ui,sans-serif;color:#e8e8e8;margin:0 0 15px;}
.below.text-content-area a {font-size:14px;color:#a4afff;}
.below.text-content-area .faq {padding-top:20px;}
.below.text-content-area summary {font-size:14px;}
.below.text-content-area details {border-color:var(--border-color);}
.below.text-content-area details p {margin-top:14px;}
.comments-section {padding:20px;}
.comments-section h2 {text-align:center;margin:0 0 20px;color:var(--text-muted-color);font-size:21px;}
/* Match the homepage's color scheme so the shared comments frame stays transparent. */
.comments-section iframe {display:block;border:0;margin:0 auto;max-width:100%;color-scheme:normal;}
.lofi-site-footer {display:block;text-align:center;border:0;padding:20px;color:var(--text-muted-color);font:14px system-ui,sans-serif;}
/* The shared header and drawer sit above page content. Keep the live recorder
   controls above those layers, while native dialogs retain their top layer. */
.recording-tray {z-index:8100;}
.instrument-nav .nav-item a {box-sizing:border-box;}
@media(max-width:780px) {
  #lofiApp {padding:20px 12px 0;}
  #lofiApp>.intro {padding:0 4px 22px;}
  .text-content-area {padding:20px 16px;}
  .homepage-content,.comments-section {padding:12px;}
}
/* Search-friendly page identification and a readable, visible making guide. */
.lofi-breadcrumb{display:flex;gap:8px;color:#858b98;font:11px/1.4 system-ui,sans-serif;margin:0 0 18px}.lofi-breadcrumb a{color:#b4c0b8}.lofi-title-subtitle{display:block;color:#eef0f3;font-size:.38em;line-height:1.2;letter-spacing:1px;margin-top:9px;-webkit-text-stroke:0}#lofiApp>.intro .subtitle{max-width:610px}.lofi-guide-links{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 30px}.lofi-guide-links a{border:1px solid #555566;border-radius:6px;padding:9px 12px;text-decoration:none}.lofi-guide-steps{margin:0 0 30px;padding-left:24px;line-height:1.75}.lofi-guide-steps li{padding-left:5px;margin:0 0 13px}.below.text-content-area h2:not(:first-of-type){margin-top:32px}.below [id]{scroll-margin-top:80px}.below.text-content-area .lofi-more-tools{margin-top:25px}.lofi-guide-links a:hover{background:#383844}.below.text-content-area .faq{padding-top:0}