.recorder-heading{align-items:center}.recorder-heading .muted{max-width:720px;margin:.35rem 0 0}
#screen-recorder [hidden],#recording-result [hidden]{display:none!important}.development-toggle{display:flex;align-items:center;gap:9px}.development-toggle input{width:18px;height:18px;flex:none}#development-options{display:grid;gap:8px}#upload-progress{width:100%}
.recorder-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:18px}
.recorder-card,.result-card,.recorder-guide{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px}
.preview-wrap{position:relative;min-height:360px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
#recorder-preview{width:100%;height:100%;object-fit:contain;background:#111}
#recorder-preview:not([src]):not(.has-stream){display:none}
.preview-placeholder{max-width:460px;padding:24px;text-align:center;display:grid;gap:8px;color:var(--muted);line-height:1.55}.preview-placeholder strong{color:var(--ink);font-size:1.05rem}
.recording-badge{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:999px;background:#fff;color:#a40000;border:1px solid #a40000;font-size:.78rem;font-variant-numeric:tabular-nums}
.recorder-actions,.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}.recorder-actions .primary-button{margin:0}.recorder-file{display:inline-flex;align-items:center}
.recorder-settings{display:flex;flex-direction:column;gap:11px}.recorder-settings h2{margin:0 0 6px}.recorder-settings label{font-size:.84rem;font-weight:800}.recorder-settings select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.recorder-audio-options{display:grid;gap:10px;min-width:0;margin:0 0 8px;padding:12px;border:1px solid var(--line);border-radius:9px}.recorder-audio-options legend{padding:0 5px;font-weight:800}.recorder-audio-options p{margin:0;line-height:1.55}
.destination-box{display:grid;gap:6px;margin:7px 0;padding:15px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}.destination-box span{font-size:.74rem;color:var(--muted);font-weight:800}.destination-box code{width:max-content;max-width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow-wrap:anywhere}
.full-button{width:100%;margin-top:auto}.result-card{margin-top:18px}.result-card h2{margin:.3rem 0}.result-link{display:inline-flex;align-items:center;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-weight:750}.result-link:hover{background:var(--soft)}
.recorder-guide{margin-top:18px}.recorder-guide h2{margin-top:0}.recorder-guide ol{margin-bottom:0;padding-left:1.25rem;line-height:1.8;color:var(--muted)}
@media(max-width:820px){.recorder-grid{grid-template-columns:minmax(0,1fr)}.preview-wrap{min-height:0}.recorder-actions>*{min-width:0;max-width:100%;flex:1 1 100%;justify-content:center;text-align:center}.result-actions>*{min-width:0;max-width:100%;flex:1 1 100%;justify-content:center;text-align:center}}