.composer{max-width:1192px;margin:0 auto 30px;padding:26px;border:1px solid #2e526d;border-radius:20px;background:linear-gradient(145deg,#102033,#0e1624)}
.composer-head{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:end;margin-bottom:22px}.composer-head h2{font-size:clamp(25px,3.5vw,38px);margin:0;letter-spacing:-.035em}.composer-head>p{color:var(--muted);line-height:1.65;margin:0}.composer-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:20px}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.controls label,.output-panel label{display:flex;flex-direction:column;gap:7px;color:#b9c8d9;font-size:12px;font-weight:700}.controls .wide{grid-column:1/-1}
.controls select,.controls input,.controls textarea,.output-panel textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#0b1421;color:var(--text);padding:11px 12px;outline:none;resize:vertical}.controls select:focus,.controls input:focus,.controls textarea:focus,.output-panel textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #70b7ff1c}
.output-panel{display:flex;flex-direction:column;gap:12px;padding:17px;border-radius:15px;background:#0a111d;border:1px solid #26374b}.output-panel textarea{line-height:1.55;color:#dbe8f4}.composer-status{min-height:20px;color:var(--warm);font-size:12px}.composer-actions{display:flex;gap:8px}.composer-actions button{flex:1;border:1px solid #3b668b;background:#183b5d;color:#f3f8fd;border-radius:9px;padding:11px;cursor:pointer}.composer-actions .secondary{background:#171f2c;border-color:var(--line)}
.card.selected{border-color:var(--cyan);box-shadow:0 0 0 2px #72e4d322}.composer-actions button:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.actions:has(.sound){flex-wrap:wrap}.actions .sound{flex:1 0 100%;background:#4d356f;border-color:#8064aa;color:#fff}
@media(max-width:950px){.composer-head,.composer-grid{grid-template-columns:1fr}}
@media(max-width:580px){.composer{margin:0 16px 22px;padding:18px}.controls{grid-template-columns:1fr 1fr}.controls label:first-child,.controls .wide{grid-column:1/-1}.composer-actions{flex-wrap:wrap}.composer-actions button{min-width:45%}}
.brief-banner{max-width:1180px;margin:0 auto 24px;padding:16px 20px;border:1px solid #2e8278;border-radius:16px;background:#102e32;color:#e7fffb;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brief-banner[hidden]{display:none}.brief-banner p{margin:0 0 4px}.brief-banner a{color:#72e4d3;white-space:nowrap}
@media(max-width:650px){.brief-banner{margin:0 14px 20px;align-items:flex-start;flex-direction:column}}