.music-card-player{position:relative;overflow:hidden;aspect-ratio:16/9;background:#151720;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-bottom:1px solid #303340}
.music-card-player>.creation-play,.music-card-player>.creation-duration,.creation-play-feedback{position:relative;z-index:1}
.music-card-player>.creation-duration{background:#151720dd;padding:4px 8px;border-radius:4px}
.creation-play-feedback{font-size:12px;text-align:center;max-width:90%;color:#ded5f4;background:#151720dd;border-radius:4px}.creation-play-feedback:empty{display:none}
.audio-waveform,.music-card-visual{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lesson-audio-output{position:relative;aspect-ratio:3/1;background:#151720;border-radius:10px;overflow:hidden}
.audio-unlock-overlay{position:fixed;inset:0;z-index:2147483646;background:#080a14dd;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff}
.audio-unlock-overlay p{margin:0 20px 150px;text-align:center}.audio-unlock-overlay button{position:absolute;top:calc(50% + 80px)}
.music-card-player .creation-play{border-radius:50%;width:72px;height:72px;font-size:28px;background:#c2afff;color:#201730;border:0;display:grid;place-items:center}
.creation-duration{font-size:12px;color:#aaaec1;font-variant-numeric:tabular-nums}
.shader-preview-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#070915;min-width:0}
.shader-preview-frame>img,.shader-preview-frame>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured-creation>.shader-preview-frame{padding:0;min-height:0}
.learn-course{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:48px}
.learn-course-card{padding:24px;background:#181a23;border:1px solid #303340;border-radius:12px;display:flex;flex-direction:column;gap:10px}
.learn-course-card h3,.learn-course-card p{margin:0}.learn-course-card p{color:#aaafc0}.learn-course-card small{margin-top:auto;color:#aaaec1}
.learn-course-card .button-link{align-self:flex-start}
.lesson-breadcrumb{display:block;margin:24px 0 10px;color:#b9aecf;font-size:13px}
.lesson-progress{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.lesson-progress a{font-size:13px;text-decoration:none;padding:8px 12px;border:1px solid #363a48;border-radius:6px;color:#b0b4c7}.lesson-progress a[aria-current=step]{background:#c2afff;color:#201730}
.guided-lesson{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,32vw,460px);min-height:0;height:100%}
.lesson-lab{min-width:0;min-height:0;overflow:auto;padding:24px}.lesson-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.lesson-controls button:first-child{background:#c2afff;color:#201730;min-width:80px}
.lesson-code{height:340px;overflow:auto;border:1px solid #3c4050;border-radius:10px;background:#14161e}.lesson-code .cm-editor{height:100%}.lesson-code .cm-scroller{overflow:auto}
.lesson-feedback,.lesson-caption{font-size:13px;color:#b1b7ca;overflow-wrap:anywhere}.lesson-output{border:1px solid #343849;border-radius:10px}
.lesson-guide{min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px;border-left:1px solid #30313a;background:#191b25}.lesson-guide h2{margin-top:6px}.lesson-guide p{color:#b9bfd0}.lesson-guide h3{margin-top:28px}.lesson-guide details{border:1px solid #363b4b;padding:14px;border-radius:8px;margin:24px 0}.lesson-guide summary{cursor:pointer}.lesson-step-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12px;align-items:center}
@media(max-width:1100px){.learn-course{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.learn-course{grid-template-columns:1fr}.lesson-code{height:300px}}

.recorded-waveform{position:absolute;inset:15% 6%;display:flex;align-items:center;justify-content:space-between;pointer-events:none;opacity:.75}.recorded-waveform i{width:1.3%;min-height:3px;background:#454053;border-radius:3px}.recorded-waveform i.heard{background:#b7a0f8}.music-card-player[data-playback=playing]>.creation-play{box-shadow:0 0 0 calc(var(--sound-energy,0)*18px) #c2afff25}

body:not([data-page=create]) #creation-context{display:none}

/* Conversations keep the example, answers, and composer together. */
.chat-panel{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:13px}
#agent.chat-panel{overflow:hidden;padding:20px;min-width:0;width:auto}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-heading button{font-size:11px;background:transparent}
.chat-messages{flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.chat-message{padding:12px 14px;margin:0 0 12px;border-radius:10px;background:#12141c;overflow-wrap:anywhere}
.chat-message.user{margin-left:24px;background:#292337}
.chat-speaker{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#bba8ed}
.chat-message p{white-space:pre-wrap;line-height:1.6;margin:8px 0;color:#d0d3df}
.chat-message pre{font:12px/1.65 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#090b11;border-radius:6px;padding:12px;color:#bed4b4}
.chat-composer{flex:none;border-top:1px solid #373342;padding-top:10px}
.chat-panel textarea{width:100%;height:76px;min-height:60px;max-height:160px;resize:vertical;border:1px solid #454756;border-radius:8px;padding:10px;background:#101218;color:inherit;font:inherit}
.chat-panel label,#page-body .chat-panel label{display:block;margin:8px 0 6px;padding:0;border:0;font-size:12px;color:#aeb4c6}
.chat-panel .sr-only,#page-body .chat-panel .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chat-suggestions button{font-size:11px;text-align:left;padding:5px 8px;margin:0!important;background:transparent;border-color:#51475f;border-radius:12px}
.chat-send-row{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.chat-send-row select{margin-right:auto;max-width:130px;font-size:12px}
.chat-panel [role=status]{font-size:12px;margin:0;color:#abb0c0;white-space:pre-wrap}
.chat-panel>details{font-size:11px;color:#989fb1;margin:0;padding:0;border:0;flex:none}
.lesson-chat{flex:1;min-height:0;padding:0}
.lesson-guide .chat-message p{font-size:13px}
@media(max-width:700px){.chat-suggestions button{min-height:32px}.chat-send-row button{min-height:40px}}

/* Keep the composer visible even when the legacy access form is open. */
.chat-panel form[id$="unlock-form"]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:end;flex:none}
.chat-panel form[id$="unlock-form"] label{grid-column:1/-1;margin:0}
.chat-panel form[id$="unlock-form"] input{min-width:0;height:34px;margin:0}
.chat-panel form[id$="unlock-form"] button{height:34px;padding:4px 12px;margin:0!important}
/* Create and Learn use a real right column, with their own scrolling chat. */
body[data-page=learn] #page-body:has(.guided-lesson){padding:0;max-width:none;height:calc(100dvh - 100px);min-height:0}
.lesson-header>.lesson-breadcrumb{display:inline-block;margin:0 0 0 16px}
#page-body .lesson-header>h1{font-size:28px;margin:16px 0}
.lesson-header>.lesson-progress{margin:12px 0 20px}
#page-body .lesson-guide>h2{font-size:18px;margin:4px 0 16px}
@media(min-width:1001px){
  .lesson-lab{display:flex;flex-direction:column}
  .lesson-header,.lesson-controls,.lesson-feedback,.lesson-caption{flex:none}
  .lesson-code{flex:1;min-height:180px;height:auto}
  .lesson-output,.lesson-audio-output{flex:none;height:clamp(120px,20vh,220px);aspect-ratio:auto}
  .lesson-output>canvas{object-fit:contain}
}
@media(max-width:1000px){
  body[data-page=learn] #page-body:has(.guided-lesson){height:auto}
  .guided-lesson{grid-template-columns:1fr}
  .lesson-lab{padding:20px}
  .lesson-guide{border-left:0;border-top:1px solid #30313a}
  .lesson-chat{flex:none;height:580px}
  #agent.chat-panel{height:650px;border-left:0;border-top:1px solid #30313a}
}