.vocal-booth {margin:16px 0;padding:18px;border:1px solid #72576f;border-radius:14px;background:#1b171e;color:#eee7ee;font:14px/1.7 system-ui,sans-serif;text-align:left;box-sizing:border-box;}
.vocal-booth * {box-sizing:border-box;}
.vocal-booth > summary {cursor:pointer;font-size:17px;font-weight:700;list-style:revert;}
.vocal-booth summary span {font-size:12px;color:#c3afc0;margin-left:12px;}
.vocal-booth .vocal-lead {color:#ead1dd;margin:14px 0;}
.vocal-grid {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;}
.vocal-booth label {display:flex;flex-direction:column;gap:5px;margin:8px 0;min-width:0;}
.vocal-booth input:not([type=range]),.vocal-booth textarea,.vocal-booth select {width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #695c6d;border-radius:7px;background:#110f16;color:#f2e9f0;font:inherit;}
.vocal-booth input:not([type=range]),.vocal-booth select {font-size:16px;}
.vocal-booth textarea {resize:vertical;line-height:1.9;font-size:17px;min-height:290px;}
.vocal-booth input[type=range] {width:100%;margin:0;min-height:36px;accent-color:#ee97bc;writing-mode:horizontal-tb;}
.vocal-booth button,.vocal-booth .vocal-downloads a {min-height:44px;}
.vocal-booth button {border:1px solid #806680;border-radius:7px;background:#352b3a;color:#f8f1f8;font:inherit;padding:8px 12px;cursor:pointer;white-space:normal;}
.vocal-booth button:disabled {opacity:.5;cursor:default;}
.vocal-booth a {color:#f2acd5;overflow-wrap:anywhere;}
.vocal-booth :focus-visible {outline:2px solid #ffc1e3;outline-offset:3px;}
.vocal-actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;}
.vocal-actions label {flex:1;min-width:170px;}
.vocal-actions a {display:inline-flex;align-items:center;padding:8px;border:1px solid #745e74;border-radius:6px;min-height:44px;}
.vocal-booth meter {width:100%;height:16px;}
.vocal-booth #vocal-record {background:#693653;border-color:#c878a2;}
.vocal-booth.is-recording {border-color:#f185af;}
.vocal-booth #vocal-status {min-height:3em;color:#ffdbea;}
.vocal-booth #vocal-draft-status,.vocal-guide {font-size:12px;color:#c7b6c9;}
.vocal-note {color:#dbc7d5;font-size:13px;margin:4px 0 12px;}
.vocal-booth #vocal-read {border-color:#c878a2;background:#493049;}
.vocal-backing {border-bottom:1px solid #514354;padding-bottom:2px;}
.vocal-backing #vocal-play-state {font-size:12px;color:#dcc4d9;}
.vocal-reader .vocal-backing .vocal-note {font-size:11px;margin:4px 0;}
.vocal-reader {width:min(780px,calc(100% - 16px));height:calc(100% - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;margin:auto;padding:18px;border:1px solid #a47999;border-radius:14px;background:#1b171e;color:#f6eef4;overflow:hidden;}
.vocal-reader[open] {display:grid;grid-template-rows:auto auto minmax(80px,1fr) minmax(0,auto);gap:8px;}
.vocal-reader::backdrop {background:#08060ce6;}
.vocal-reader-head {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vocal-reader-head h3 {color:#f6eef4;font-size:18px;line-height:1.4;margin:0;overflow-wrap:anywhere;}
.vocal-reader-head button {flex-shrink:0;font-size:13px;}
.vocal-reader .vocal-reader-jump {margin:0;font-size:12px;}
.vocal-reader .vocal-reader-jump select {font-size:16px;padding:8px;min-height:44px;}
.vocal-reader-section + .vocal-reader-section {margin-top:1.5em;}
.vocal-setup > summary {cursor:pointer;min-height:44px;line-height:1.5;padding:10px 0;font-weight:600;}
.vocal-booth .vocal-setup summary span {display:inline;margin-left:8px;font-weight:400;}
.vocal-reader .vocal-setup[open] {max-height:32dvh;overflow:auto;overscroll-behavior:contain;}
.vocal-reader .vocal-setup label {font-size:13px;}
.vocal-reader-text {overflow:auto;overscroll-behavior:contain;white-space:pre-wrap;overflow-wrap:anywhere;font-size:clamp(19px,3vw,24px);line-height:1.9;padding:8px 8px 40px;}
.vocal-reader #vocal-reader-transport {border-top:1px solid #695267;min-height:0;max-height:55dvh;overflow:auto;overscroll-behavior:contain;}
.vocal-reader .vocal-actions {gap:8px;margin:10px 0 4px;}
.vocal-reader #vocal-status {font-size:12px;line-height:1.5;min-height:0;margin:6px 0 0;}
.vocal-takes {border-top:1px solid #514354;margin-top:20px;padding-top:6px;}
.vocal-takes audio {width:100%;max-width:600px;}
.vocal-takes h3 {color:#f6eef4;}
.vocal-takes #vocal-take-info {overflow-wrap:anywhere;}
.vocal-booth #vocal-review {width:100%;margin-top:8px;border-color:#c878a2;background:#493049;}
.vocal-booth [hidden] {display:none!important;}
@media(max-width:800px) {.vocal-grid {grid-template-columns:minmax(0,1fr);gap:10px;}.vocal-booth {padding:12px;}.vocal-booth summary span {display:block;margin-left:0;}}
@media(max-width:480px) {.vocal-reader {padding:12px;gap:8px;}.vocal-reader .vocal-actions button {flex:1;font-size:13px;padding:8px;}.vocal-reader #vocal-clock {font-size:12px;}}