@layer legacy{.recording-studio{max-width:1440px;margin:auto}.demo-steps{gap:2rem;margin:0 0 2rem;padding:0;list-style:none;display:flex}.demo-steps li{color:#66756f;align-items:center;gap:.65rem;display:flex}.demo-steps li span{background:#e7eee9;border-radius:50%;place-items:center;width:2rem;height:2rem;display:grid}.demo-steps li[aria-current]{color:#155e4b;font-weight:700}.demo-steps li[aria-current] span{color:#fff;background:#155e4b}.demo-studio-grid{grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:start;gap:1.5rem;display:grid}.demo-settings,.demo-capture-panel{background:#fff;border:1px solid #dde6df;border-radius:20px;min-width:0;padding:1.5rem}.demo-settings{gap:1rem;display:grid}.demo-settings h2,.demo-settings p{margin:0}.demo-settings label{gap:.45rem;font-weight:600;display:grid}.demo-settings input,.demo-settings select,.demo-settings textarea{width:100%;min-width:0;font:inherit;background:#fff;border:1px solid #b9c9c0;border-radius:9px;padding:.7rem}.demo-settings :disabled{background:#f0f4f1}.demo-note{color:#56675f;font-size:.85rem;line-height:1.6}.demo-media-status{color:#52655b;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.demo-media-status svg{flex:none;width:1rem;height:1rem}.demo-media-status[data-status=Video\ available],.demo-media-status[data-status="Video from matching version"]{color:#155e4b}.demo-capture-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.demo-existing{background:#f6f9f6;border:1px solid #b9c9c0;border-radius:12px;margin-bottom:1.5rem;padding:1rem}.demo-existing-content{margin-top:1rem}.demo-existing-instructions{white-space:pre-line}.demo-success .button{margin:.4rem}.demo-capture-heading h2{margin:0}.demo-capture-heading span{color:#52655b;font-size:.85rem}.demo-viewport{aspect-ratio:16/9;background:#101f1a;border-radius:14px;position:relative;overflow:hidden}.demo-viewport video{object-fit:contain;width:100%;height:100%;display:block}.demo-viewport canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.demo-camera-placeholder{color:#e6f0e9;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:flex;position:absolute;inset:0}.demo-camera-placeholder svg{color:#8bbda1;width:3rem;height:3rem}.demo-capture-status{color:#fff;justify-content:space-between;display:flex;position:absolute;top:1rem;left:1rem;right:1rem}.demo-capture-status span,.demo-capture-status time{background:#14271de8;border-radius:8px;padding:.4rem .7rem}.demo-capture-status [data-recording=true]{background:#a72f37}.demo-countdown{color:#fff;background:#10201666;place-items:center;font-size:5rem;font-weight:700;display:grid;position:absolute;inset:0}.demo-tracking{background:#edf5ef;border-radius:10px;padding:.7rem 1rem}.demo-actions{flex-wrap:wrap;gap:.75rem;margin-top:1rem;display:flex}.demo-upload{cursor:pointer;position:relative;overflow:hidden}.demo-upload input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.demo-upload:focus-within{outline-offset:3px;outline:3px solid #3b8066}.demo-guidance{border-top:1px solid #dde6df;margin-top:1.5rem;padding-top:1rem}.demo-guidance li{margin:.5rem 0}.demo-player-tools{flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:.8rem;font-size:.85rem;display:flex}.demo-player-tools label,.demo-review label{align-items:flex-start;gap:.6rem;display:flex}.demo-player-tools input,.demo-review input{flex-shrink:0;width:1.2rem;height:1.2rem}.demo-review{margin-top:1.5rem}.demo-scrubber{accent-color:#155e4b;width:100%;margin-top:.8rem}.demo-success{text-align:center;padding:4rem 1rem}.demo-trim{background:#f6f9f7;border:1px solid #b9c9c0;border-radius:12px;min-width:0;margin:1.25rem 0 0;padding:1rem}.demo-trim legend{padding:0 .4rem;font-weight:700}.demo-trim p{color:#52655b;margin:0 0 1rem;font-size:.9rem}.demo-trim-selection{background:#dce5df;border-radius:8px;height:.6rem;margin-bottom:1rem;position:relative;overflow:hidden}.demo-trim-selection span{background:#236b52;height:100%;position:absolute}.demo-trim-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;display:grid}.demo-trim-fields label{gap:.4rem;font-weight:600;display:grid}.demo-trim input[type=number]{width:100%;min-width:0;font:inherit;border:1px solid #b9c9c0;border-radius:7px;padding:.5rem}.demo-trim input[type=range]{accent-color:#155e4b;width:100%;min-height:2rem}.demo-trim output{font-variant-numeric:tabular-nums;align-self:center;font-weight:600}.demo-export,.demo-export label{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.demo-success>svg{color:#23633e;background:#e5f3e9;border-radius:50%;width:4rem;height:4rem;padding:1rem}.instructor-demonstration{min-width:0}@media (width<=850px){.demo-studio-grid{grid-template-columns:1fr}.demo-steps{gap:1rem;font-size:.8rem}.demo-settings,.demo-capture-panel{padding:1rem}}}