/* The recorder inherits the site's type, color and spacing tokens. */
.recorder-view{margin-top:-20px;margin-bottom:76px}
.recorder-stage{position:relative;width:100%;aspect-ratio:2.15;min-height:220px}
.recorder-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.recorder-stage #loading{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--mono);color:var(--muted)}
.recorder-stage #loading[hidden]{display:none}
.recorder-stage #hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:11px/1.5 var(--mono);color:var(--muted);opacity:0;pointer-events:none;white-space:nowrap}
.recorder-stage #hint.show{opacity:1}
.recorder-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:22px;font:12px/1.65 var(--mono)}
.recorder-track{min-width:0}.recorder-track p{overflow-wrap:anywhere}
.recorder-track #status{color:var(--muted);font-size:11px;margin-top:5px}
.recorder-actions{display:flex;align-items:baseline;gap:24px;flex-shrink:0}
.recorder-actions .text-link{font:12px/1.65 var(--mono);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--ink) 40%,transparent);text-underline-offset:4px}
.recorder-help{margin-top:28px;font:11px/1.8 var(--mono);color:var(--muted)}
.recorder-help summary{width:fit-content;cursor:pointer}.recorder-help p{max-width:72ch;margin-top:14px}
.recorder-help #control-list{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.recorder-help #control-list button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.recorder-help #recording-sources{padding-left:24px;margin-top:12px;overflow-wrap:anywhere}
.recorder-help #recording-sources a{text-underline-offset:3px}
.recorder-stage #accessible-controls{position:absolute;inset:0;pointer-events:none}
.recorder-stage .a11y-control{position:absolute;background:transparent;color:transparent;border:0;pointer-events:none;opacity:0;transform:translate(-50%,-50%);border-radius:2px}
.recorder-stage .a11y-control:focus-visible{opacity:1;outline:2px solid var(--ink);outline-offset:5px}
@media(max-width:600px){.recorder-view{margin-top:-25px;margin-bottom:55px}.recorder-stage{min-height:200px;aspect-ratio:1.8}.recorder-stage #hint{width:max-content;max-width:calc(100% - 16px);white-space:normal;text-align:center}.recorder-bottom{flex-direction:column;gap:16px;margin-top:8px}.recorder-actions{gap:24px}.recorder-actions .text-link,.recorder-help summary,.recorder-help #control-list button{min-height:44px;display:inline-flex;align-items:center}.recorder-help #control-list{gap:4px 20px}.recorder-help{margin-top:24px}}