.composer-dialog { width: min(720px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.25rem, 4vw, 2.75rem); overflow-y: auto; color: #35233f; background: #fffaf2; border: 1px solid #dbcaba; border-radius: 1.25rem; }
.composer-dialog::backdrop { background: rgb(34 20 35 / .65); }
.composer-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.composer-head h2 { margin: .35rem 0 1rem; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.05; }
.composer-close { flex: none; width: 44px; height: 44px; border: 1px solid #cdbbb0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.7rem; cursor: pointer; }
.composer-package { border-block: 1px solid #dfd1c6; padding: .7rem 0; font-weight: 700; }
.composer-notice { background: #f9e8c9; padding: .8rem 1rem; border-radius: .5rem; }
.composer-help, .composer-examples { color: #594958; font-size: .92rem; line-height: 1.5; }
.composer-description { width: 100%; min-height: 10rem; resize: vertical; padding: 1rem; background: #fffefa; border: 1px solid #ad9991; border-radius: .6rem; font: inherit; }
.composer-count { text-align: right; color: #594958; font-size: .85rem; }
.composer-examples { margin: .5rem 0 1.5rem; }
.direction-sheet { margin: 1rem 0; padding: clamp(1rem, 3vw, 1.5rem); background: #f8eedf; border: 1px solid #e2cfbb; box-shadow: 4px 5px 0 #e9d6c4; }
.direction-sheet h3 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: .35rem 0; }
.direction-sheet dl { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; margin: 1rem 0 0; }
.direction-sheet dl > div { padding-top: .55rem; border-top: 1px solid #d9c6b3; }
.direction-sheet dl > div:first-child { grid-column: 1 / -1; }
.direction-sheet dt { font-size: .75rem; color: #795b4c; font-weight: 700; }
.direction-sheet dd { margin: .15rem 0 0; font-size: .95rem; line-height: 1.4; }
.direction-sample { display: grid; gap: .5rem; padding: .75rem 0; border-top: 1px solid #dfd1c6; }
.direction-sample audio { width: 100%; max-width: 400px; }
#direction-samples { margin-bottom: 1.5rem; }
#composer-review .form-input { width: 100%; }
#composer-review .consent-row { margin-top: 1.4rem; }
.composer-link { border: 0; padding: .5rem 0; color: #843b2e; background: transparent; text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }
.composer-error { color: #982f22; font-weight: 700; }
.composer-dialog button:focus-visible, .composer-dialog input:focus-visible, .composer-dialog textarea:focus-visible, .composer-link:focus-visible { outline: 3px solid #ce4b31; outline-offset: 3px; }
.song-production { display: flex; align-items: center; gap: 1.5rem; margin: 1.5rem 0; padding: 1.25rem; background: #f8eedf; border-radius: .75rem; }
.song-production[hidden] { display: none; }
.production-label { margin: 0; font-size: .7rem; letter-spacing: .14em; font-weight: 800; }
.studio-ensemble { display: flex; align-items: end; gap: .3rem; min-width: 140px; height: 95px; }
.musician { display: block; width: 43px; height: 82px; overflow: visible; transform-origin: bottom center; }
.is-playing .musician { animation: studio-sway 1.8s ease-in-out infinite alternate; }
.is-playing .guitar { animation-delay: -.6s; }.is-playing .drums { animation-delay: -1.2s; }
.musician .playing-arm { transform-box: fill-box; transform-origin: 0 0; }
.is-playing .playing-arm { animation: studio-play .55s ease-in-out infinite alternate; }
.is-playing .guitar .playing-arm { animation-duration: .8s; }
.is-playing .drums .playing-arm { animation-duration: .35s; }
@keyframes studio-play { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes studio-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (max-width: 480px) { .song-production { align-items: flex-start; flex-direction: column; } .composer-dialog .button { margin-bottom: .5rem; } }
@media (max-width: 640px) { .composer-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .is-playing .musician, .is-playing .playing-arm { animation: none; } }