/* Music generator: the prompt box on the left with the result under it, the model, length and button on the right */
.mg-work { grid-template-columns: minmax(0, 1fr) 320px; }
.mg-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.mg-prompt { display: grid; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.mg-prompt:focus-within { border-color: var(--ink); outline: var(--ring); }
.mg-prompt textarea { display: block; width: 100%; min-height: 150px; padding: 20px 22px; border: 0; outline: none; resize: vertical; background: transparent; font: 400 17px/1.6 var(--sans); color: var(--ink); }
.mg-prompt textarea::placeholder { color: var(--muted-2); }
.mg-prompt-foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper-2, #f5f5f5); font: 500 12.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.mg-prompt-foot.is-full #mg-count { color: #c23a24; }
.mg-ideas { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-ideas button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 12px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.mg-ideas button:hover { border-color: var(--ink); }
.mg-link { padding: 0; border: 0; background: none; font: 600 12.5px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mg.is-busy .mg-prompt textarea { color: var(--muted); }

.mg-result { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.mg-wave { display: block; width: 100%; height: 72px; border-radius: 10px; background: var(--paper-2, #f5f5f5); }
.mg-result audio { width: 100%; }
.mg-result .tool-stats { margin: 0; }
#mg-credits:empty, #mg-stats:empty { display: none; }
.mg-live { display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--sans); }
.mg-live #mg-live-text { flex: 1; }
.mg-bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.mg-bars i { width: 3px; height: 30%; border-radius: 2px; background: var(--purple); animation: mg-bars 0.9s ease-in-out infinite; }
.mg-bars i:nth-child(2) { animation-delay: -0.7s; } .mg-bars i:nth-child(3) { animation-delay: -0.4s; } .mg-bars i:nth-child(4) { animation-delay: -0.2s; } .mg-bars i:nth-child(5) { animation-delay: -0.55s; }
.mg-live.is-quiet .mg-bars i { animation: none; height: 30%; background: var(--muted-2); }
@keyframes mg-bars { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .mg-bars i { animation: none; height: 60%; } }

/* the side panel, in blocks */
.mg-panel { display: grid; gap: 14px; align-content: start; }
.mg-block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mg-block h3 { margin: 0; font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mg-block > .btn { width: 100%; }
.mg-block .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.mg-hint { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.mg-engine, .mg-kind { display: grid; grid-template-columns: 1fr 1fr; }
.seg button { border: 0; border-radius: var(--pill); padding: 8px 10px; background: transparent; font: 500 12.5px/1.2 var(--sans); color: var(--ink); cursor: pointer; }
.seg button.is-on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.mg-download { display: grid; gap: 10px; }
.mg-download .btn { width: 100%; }

/* the Pro block: live in the app, a blurred preview behind a sign-in card on the site */
.mg-pro-block { position: relative; overflow: hidden; }
.mg-pro-inner { display: grid; gap: 10px; }
.mg-pro-block.is-locked .mg-pro-inner { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mg-lock { display: none; }
.mg-pro-block.is-locked .mg-lock { position: absolute; inset: 0; display: grid; gap: 8px; align-content: center; padding: 14px; text-align: center; background: rgba(255, 255, 255, 0.6); }
.mg-lock b { font: 600 14.5px/1.25 var(--sans); }
.mg-lock p { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.mg-lock .btn { width: 100%; text-align: center; }
.mg-lock .mg-link { justify-self: center; }
.mg-pro-block.is-locked { min-height: 200px; }

/* signed out, past the day's downloads: a free account */
.mg-gate { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #f3effc; }
.mg-gate b { font: 600 15px/1.2 var(--sans); }
.mg-gate p { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.mg-gate .btn { width: 100%; text-align: center; }
.mg-gate .mg-link { justify-self: center; }

/* the examples on the page: a prompt, the track it made, and a button that puts the prompt in the box */
.mg-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-example { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mg-example-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mg-example-head .mg-tag { flex: none; font: 600 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mg-example q { font: 400 17px/1.5 var(--serif); quotes: "“" "”"; }
.mg-example audio { width: 100%; }
.mg-example-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.mg-example-foot button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); cursor: pointer; }
.mg-example-foot button:hover { border-color: var(--ink); }
@media (min-width: 861px) { .mg-examples { grid-template-columns: 1fr 1fr; } }

@media (max-width: 860px) {
  .mg-work { grid-template-columns: 1fr; }
  .mg-prompt textarea { min-height: 120px; font-size: 16px; padding: 16px; }
}