.pattern-choices button {
  display: grid;
  gap: .08rem;
  min-width: 150px;
  text-align: left;
}

.pattern-choices small {
  font-size: .75rem;
  font-weight: 700;
  opacity: .8;
}

.now-playing {
  padding: .8rem 1rem;
  border-left: 5px solid var(--sage);
  border-radius: 8px;
  background: #eef5ee;
}

.bass-choice { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:.8rem 0 1rem; padding:.8rem 1rem; border:2px solid #315e52; border-radius:14px; background:#edf6f1; }
.bass-choice > span { display:grid; }
.bass-choice small { color:#52656c; }
.bass-choice [role="group"] { display:flex; gap:.45rem; }
.bass-choice button { min-width:72px; padding:.55rem .7rem; }
.bass-choice button[aria-pressed="true"] { background:#315e52; color:#fff; box-shadow:0 0 0 3px #c7ddd3; }
.advanced-beat { margin:1rem 0 0; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; background:#f7faf8; }
.advanced-beat > summary { display:flex; justify-content:space-between; gap:1rem; }
.advanced-beat > summary span { color:#40564e; font-size:.78rem; font-weight:700; }
.advanced-beat:not([open]) > :not(summary),.sound-library:not([open]) > :not(summary),.build-sounds:not([open]) > :not(summary) { display:none!important; }
.show-more-beats { border-style:dashed !important; background:#f8faf9 !important; }

.kit-studio { --kit-color:#315e52; margin:1.2rem 0; padding:1.15rem; border:2px solid var(--kit-color); border-radius:20px; background:linear-gradient(145deg,#f7fbf9,#fff8ef); box-shadow:0 12px 35px rgba(31,67,56,.09); }
.kit-intro { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.kit-intro h3 { margin:.2rem 0 .35rem; color:var(--deep); font:800 1.45rem/1.2 Georgia,serif; }
.kit-intro p:not(.kit-kicker) { max-width:720px; margin:.2rem 0 .8rem; }
.kit-kicker { margin:0; color:var(--kit-color); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.kit-play { min-width:130px; padding:.8rem 1rem; border-color:var(--kit-color); background:var(--kit-color); color:#fff; }
.kit-row { margin-top:1rem; padding-top:1rem; border-top:1px solid #d8e1dc; }
.kit-row > strong { display:block; margin-bottom:.6rem; color:#294d42; }
.kit-choices,.scene-choices { display:flex; flex-wrap:wrap; gap:.5rem; }
.kit-button { padding:.58rem .72rem; background:#fff; border:2px solid #91a49b; }
.kit-button[aria-pressed="true"] { border-color:var(--kit-color); background:var(--kit-color); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--kit-color) 22%,white); }
.instrument-pads { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:.65rem; }
.instrument-pad { min-height:84px; display:grid; align-content:space-between; gap:.35rem; padding:.7rem; border:2px solid color-mix(in srgb,var(--kit-color) 68%,white); background:#fff; color:#203d35; text-align:left; box-shadow:0 5px 0 color-mix(in srgb,var(--kit-color) 35%,white); transition:transform .08s,box-shadow .08s,background .08s; }
.instrument-pad span { width:1.45rem; height:1.45rem; display:grid; place-items:center; border-radius:50%; background:#edf3f0; font-size:.72rem; }
.instrument-pad.hit,.instrument-pad:active { transform:translateY(4px); box-shadow:0 1px 0 var(--kit-color); background:color-mix(in srgb,var(--kit-color) 12%,white); }
.scene-button { min-width:96px; display:grid; gap:.08rem; padding:.58rem .8rem; background:#fff; border:2px solid #91a49b; }
.scene-button small { font-size:.7rem; opacity:.75; }
.scene-button[aria-pressed="true"] { border-color:var(--kit-color); background:color-mix(in srgb,var(--kit-color) 12%,white); color:#173f34; }
.kit-status { display:block; margin-top:.65rem; color:#52675e; font-size:.84rem; }
.produced-choices { display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:.75rem; }
.produced-track { min-height:104px; display:grid; gap:.35rem; align-content:center; padding:1rem; border:2px solid var(--kit-color); background:#fff; color:#21483d; text-align:left; }
.produced-track strong { font-size:1.05rem; }
.produced-track small { font-size:.8rem; line-height:1.45; opacity:.82; }
.produced-track[aria-pressed="true"] { background:var(--kit-color); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--kit-color) 22%,white); }
.build-sounds { margin-top:1rem; padding:.8rem 1rem; border:1px dashed #8ca097; border-radius:14px; background:rgba(255,255,255,.62); }
.build-sounds > summary { color:#3f6157; }
.sound-library { margin:1.1rem 0 .4rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; background:#f8faf9; }
.sound-library > summary { font-size:1rem; }
.sound-library .pattern-choices { margin-bottom:.7rem; }

.record-option {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f4f8f5;
}

.record-option input {
  margin-top: .35rem;
  transform: scale(1.2);
}

.small-note {
  color: #445b52;
  font-size: .92rem;
}

select {
  width: min(100%, 420px);
  margin: .45rem 0 1rem;
  padding: .72rem 2.4rem .72rem .85rem;
  border: 2px solid #81988e;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.prompt-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: .25rem 1rem;
  align-items: end;
  max-width: 760px;
}

.prompt-controls label { grid-column: 1; }
.prompt-controls select { grid-column: 1; margin: 0; }
.prompt-controls button { grid-column: 2; grid-row: 2; }

#promptOutput {
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 6px solid #c99071;
  border-radius: 8px;
  background: #fff8ef;
  color: #244c42;
  font: 700 1.15rem/1.5 Georgia, serif;
}
.rhyme-writer { margin-top:1.25rem; padding:1.15rem; border:2px solid #6f4d87; border-radius:18px; background:linear-gradient(145deg,#fbf7ff,#fff9f2); }
.rhyme-writer h3 { margin:.2rem 0 .4rem; color:#49305e; font:800 1.35rem/1.25 Georgia,serif; }
.rhyme-writer textarea { width:100%; box-sizing:border-box; margin:.4rem 0 1rem; padding:.8rem; border:2px solid #9a86a8; border-radius:12px; background:#fff; color:var(--ink); font:inherit; line-height:1.55; }
.rhyme-writer #songDraft { min-height:260px; font-family:Georgia,serif; }
.rhyme-options { display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:1rem; }
.rhyme-options label { display:grid; font-weight:800; }
.rhyme-options select { width:100%; }

.studio-note, .example-song details {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7faf7;
}

summary { cursor: pointer; font-weight: 800; color: var(--deep); }

.mixer { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #f3f8f5; }
.mixer h3 { margin: .1rem 0 .7rem; }
.mixer-grid { display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); gap: 12px; }
.mixer label { display: grid; gap: 5px; font-size: .86rem; font-weight: 750; }
.mixer output { font-size: .75rem; color: #52656c; }
.sample-pads { display: grid; grid-template-columns: repeat(5,minmax(150px,1fr)); gap: 10px; }
.sample-pads.compact-pads:not(.show-all-pads) .sample-pad:nth-child(n+2) { display:none; }
.sample-pads.compact-pads:not(.show-all-pads) { grid-template-columns:minmax(260px,520px); }
.more-pads { margin:.75rem 0; background:#f3f8f5; border-style:dashed; }
.sample-pad { padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: #f7faf7; }
.sample-pad h3 { margin: 0 0 .65rem; color: var(--deep); }
.pad-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.pad-heading h3 { margin:0; }
.timing-dot { width:.75rem; height:.75rem; border-radius:50%; background:#b8c3bd; box-shadow:0 0 0 3px #e7ece9; transition:background .12s,transform .12s; }
.timing-dot.active { background:#c5543d; transform:scale(1.25); }
.pad-name-label { font-weight:800; }
.pad-name { width:100%; box-sizing:border-box; padding:.55rem .6rem; border:1px solid #81988e; border-radius:8px; font:inherit; }
.sample-pad label { display: grid; gap: 4px; margin-top: .6rem; font-size: .78rem; }
.pad-actions { display: grid; gap: 6px; }
.pad-actions button { padding: .55rem .65rem; font-size: .78rem; }
.pad-timing { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.pad-timing select { width:100%; margin:0; padding:.5rem 1.8rem .5rem .55rem; font-size:.8rem; }
.pad-record.recording { background: #a43f3f; color: white; }
.pad-ready { display: block; margin-top: .55rem; font-size: .75rem; color: #52656c; }
.pad-meter { height:7px; margin-top:.65rem; overflow:hidden; border-radius:999px; background:#dce5e0; }
.pad-meter span { display:block; width:0; height:100%; background:linear-gradient(90deg,#477c6d,#d38656); transition:width .1s linear; }
.mouth-guide { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fffaf2; }
.mouth-grid { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 10px; margin: 1rem 0; }
.mouth-grid article { padding: .8rem; border-radius: 12px; background: white; border: 1px solid #eadbc8; }
.mouth-grid h3 { margin: 0 0 .35rem; color: var(--deep); font-size: .95rem; }
.mouth-grid p { margin: 0; font-size: .82rem; }
.real-music-guide > p { max-width: 900px; line-height: 1.65; }
.genre-recipes { display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:14px; margin:1rem 0 1.25rem; }
.genre-recipes article { display:flex; flex-direction:column; align-items:flex-start; padding:1rem; border:1px solid #d7c8b8; border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(38,72,61,.06); }
.genre-recipes h3 { margin:.15rem 0 .45rem; color:var(--deep); }
.genre-recipes p:not(.genre-tag) { flex:1; margin:.1rem 0 .9rem; font-size:.88rem; line-height:1.55; }
.genre-recipes button, .song-parts button { padding:.6rem .8rem; border-color:#315e52; background:#eef6f2; color:#234d42; font-weight:800; }
.genre-tag { margin:0; color:#9b4d3e; font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.song-blueprint { margin-top:1.25rem; padding:1.2rem; border:2px solid #315e52; border-radius:16px; background:linear-gradient(145deg,#f4f9f6,#fff8ee); }
.song-blueprint > h3 { margin:.2rem 0 .5rem; font:800 1.45rem/1.25 Georgia,serif; color:var(--deep); }
.song-note { max-width:900px; color:#445b52; line-height:1.55; }
.song-parts { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:12px; margin:1rem 0; }
.song-parts article { padding:1rem; border:1px solid #cbd9d2; border-radius:12px; background:#fff; }
.song-parts article.hook-card { grid-column:1/-1; border:2px solid #ba684f; background:#fff7ef; }
.song-parts span { color:#477c6d; font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.song-parts h4 { margin:.25rem 0 .45rem; color:var(--deep); font-size:1rem; }
.song-parts p { margin:.2rem 0 .8rem; line-height:1.62; }
.how-to-loops { background:#f2f8f5; }
.how-to-loops li { margin:.55rem 0; }
.song-timeline { margin-top:1.25rem; padding:1rem; border:2px solid #6f8e82; border-radius:16px; background:#f4f8f6; }
.song-timeline [hidden] { display:none !important; }
.timeline-empty { display:grid; gap:.35rem; margin-top:.85rem; padding:1rem; border:2px dashed #8da79d; border-radius:12px; background:#fff; color:#27453b; }
.timeline-empty strong { font-size:1.05rem; }
.song-bar:disabled, .song-bar.unavailable { opacity:.35; cursor:not-allowed; }
.timeline-head { display:flex; justify-content:space-between; align-items:start; gap:1rem; }
.timeline-head h3 { margin:.1rem 0 .35rem; color:var(--deep); }
.timeline-head p { margin:.2rem 0 1rem; max-width:720px; }
#songPosition { padding:.5rem .7rem; border-radius:999px; background:#fff; color:var(--deep); font-weight:800; white-space:nowrap; }
.timeline-scroll { width:100%; overflow-x:auto; padding-bottom:.4rem; }
.timeline-grid { display:grid; grid-template-columns:minmax(110px,1.5fr) repeat(16,minmax(38px,1fr)); gap:6px; align-items:center; }
.timeline-name { overflow:hidden; font-size:.82rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.song-bar { min-height:40px; padding:.35rem; border:2px solid #8ca097; border-radius:8px; background:#fff; color:#35574e; font-weight:800; }
.song-bar.on { background:#477c6d; border-color:#315e52; color:#fff; }
.song-bar.playing { outline:4px solid #d68c58; outline-offset:1px; transform:translateY(-1px); }
.timeline-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }

@media(max-width:700px) {
  .kit-intro { align-items:stretch; flex-direction:column; }
  .kit-play { width:100%; }
  .instrument-pads { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .produced-choices { grid-template-columns:1fr; }
  .rhyme-options { grid-template-columns:1fr; gap:0; }
  .prompt-controls { grid-template-columns: 1fr; }
  .prompt-controls button { grid-column: 1; grid-row: auto; }
  .mixer-grid { grid-template-columns: repeat(2,1fr); }
  .bass-choice { align-items:flex-start; flex-direction:column; }
  .bass-choice [role="group"] { width:100%; }
  .bass-choice button { flex:1; min-width:0; }
  .sample-pads { grid-template-columns: 1fr; }
  .mouth-grid { grid-template-columns: 1fr; }
  .genre-recipes, .song-parts { grid-template-columns:1fr; }
  .song-parts article.hook-card { grid-column:auto; }
  .timeline-head { display:block; }
  #songPosition { display:inline-block; margin-bottom:.8rem; }
  .timeline-grid { grid-template-columns:82px repeat(16,minmax(30px,1fr)); gap:3px; }
  .song-bar { min-height:36px; padding:.25rem; font-size:.75rem; }
}