/* ---------- "Try it" demo: build a song on the left, a pedalboard on the right ---------- */
.demo { max-width: 1040px; margin: 0 auto; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }

/* Builder */
.demo__builder { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.b-label { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.b-hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.b-song__row { display: flex; gap: 10px; align-items: center; }
.b-title { flex: 1; min-width: 0; font: 650 24px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; }
.b-title:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.b-bpm { display: flex; align-items: center; background: var(--bg-2); border-radius: 12px; padding: 4px; }
.b-bpm span { min-width: 76px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.b-bpm small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.b-bpm button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; }
.b-chips, .b-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.b-board .b-chips { margin-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font); padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; transition: .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip--ghost { border-style: dashed; }
.chip--pedal i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); opacity: .35; transition: .15s; }
.chip--pedal.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip--pedal.on i { opacity: 1; }

.b-parts { display: flex; flex-direction: column; }
.part { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.part:first-of-type { border-top: 0; }
.part__key { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-2); color: var(--ink-3); font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; }
.part__name { width: 92px; flex: none; text-align: left; font: 600 14px var(--font); color: var(--ink); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.part__name:hover { color: var(--accent); }
.part__sounds { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.sound { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 500 12px/1 var(--font); padding: 7px 10px 7px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ink); cursor: pointer; transition: transform .1s; }
.sound:active { transform: scale(.95); }
.sound i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.sound span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sound--off { background: transparent; border-style: dashed; color: var(--ink-3); }
.sound--off i { opacity: .3; }
.part__x { border: 0; background: none; color: var(--ink-3); font-size: 18px; padding: 2px 6px; cursor: pointer; }
.part__x:hover { color: var(--ink); }
.b-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.b-send__note { font-size: 13px; color: var(--ink-2); }

/* The one 8-bit thing: the Send button */
.px-btn {
  --px: 4px;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 15px;
  text-transform: uppercase;
  color: #16150f;
  background: var(--brand);
  border: var(--px) solid #16150f;
  padding: 14px 24px 12px;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 rgba(0, 0, 0, .28), inset var(--px) var(--px) 0 rgba(255, 255, 255, .35), 0 calc(var(--px) * 1.5) 0 0 #7a1f0a;
  cursor: pointer;
  transition: transform .05s steps(1), box-shadow .05s steps(1);
}
.px-btn:hover { background: #ff6a44; }
.px-btn:active { transform: translateY(6px); box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, .28); }

/* Stage: a little pedalboard, always dark like a real one */
.demo__stage { background: radial-gradient(120% 90% at 50% 0%, #2a2824 0%, #141311 70%); border-radius: var(--radius); padding: 28px 24px 22px; color: #f3f1ea; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mc { width: min(360px, 100%); background: linear-gradient(#34322d, #26241f); border-radius: 16px; padding: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.mc__screen { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: #0b1a12; border: 1px solid #000; border-radius: 6px; padding: 9px 11px; font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: #7cf5a8; letter-spacing: .04em; text-shadow: 0 0 6px rgba(124, 245, 168, .45); margin-bottom: 14px; min-height: 36px; }
.mc__bank { color: #3f9e66; }
.mc__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__bpm { color: #3f9e66; }
.mc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mc__sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 10px; border: 0; border-radius: 10px; background: #1b1a17; color: #f3f1ea; cursor: pointer; font: inherit; }
.mc__sw:disabled { cursor: default; }
.mc__led { width: 8px; height: 8px; border-radius: 50%; background: #3a3833; transition: .15s; }
.mc__name { font: 600 11px/1.1 ui-monospace, "SF Mono", Menlo, monospace; min-height: 12px; letter-spacing: .02em; text-transform: uppercase; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8d5cc; }
.mc__foot { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9d6cf, #8e8b83 60%, #5f5c56); box-shadow: 0 3px 0 #0c0b0a, 0 5px 8px rgba(0,0,0,.5); transition: transform .08s, box-shadow .08s; }
.mc__sw:not(:disabled):hover .mc__foot { filter: brightness(1.08); }
.mc__sw:not(:disabled):active .mc__foot { transform: translateY(3px); box-shadow: 0 0 0 #0c0b0a, 0 2px 4px rgba(0,0,0,.5); }
.mc__sw.is-live .mc__led { background: #ff5a36; box-shadow: 0 0 10px #ff5a36, 0 0 2px #fff inset; }
.mc__sw--tap.beat .mc__led { background: #7cf5a8; box-shadow: 0 0 10px #7cf5a8; }
.mc__sw.flash { animation: sw-in .45s ease both; }
@keyframes sw-in { 0% { background: #ff5a36; } 100% { background: #1b1a17; } }
.demo__stage.is-empty .mc__name, .demo__stage.is-stale .mc { opacity: .55; }

.rig { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.ped { position: relative; width: 104px; height: 118px; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--c) 88%, #fff), var(--c)); box-shadow: 0 10px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); display: flex; flex-direction: column; align-items: center; padding: 10px 8px; color: #16150f; }
.ped__lcd { width: 100%; min-height: 34px; display: grid; place-items: center; text-align: center; background: #10150f; color: #a9f2c3; border-radius: 5px; font: 600 10.5px/1.15 ui-monospace, "SF Mono", Menlo, monospace; padding: 4px; opacity: .55; transition: opacity .2s; }
.ped.is-on .ped__lcd { opacity: 1; text-shadow: 0 0 6px rgba(169, 242, 195, .5); }
.ped__name { font-weight: 700; font-size: 13px; letter-spacing: -.01em; margin-top: auto; }
.ped__led { position: absolute; top: 52px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.3); }
.ped.is-on .ped__led { background: #ff3b1f; box-shadow: 0 0 6px #ff3b1f; }
.ped.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06) translateY(-3px); } 100% { transform: none; } }
.stage__hint { font-size: 14px; color: #b3b0a6; text-align: center; min-height: 1.5em; }

.demo__done { margin-top: 16px; background: var(--accent-soft); border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.demo__done p { font-size: 17px; }

@media (max-width: 860px) {
  .demo__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .demo__builder { padding: 18px; }
  .part { flex-wrap: wrap; }
  .part__sounds { flex-basis: 100%; order: 3; padding-left: 30px; }
  .part__x { margin-left: auto; }
  .ped { width: 92px; height: 108px; }
  .b-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc__sw.flash, .ped.pop { animation: none; }
}