@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}}}@layer components{.recording-studio{container-type:inline-size}.recording-studio .demo-section-nav{flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;display:flex}.recording-studio .demo-selection-summary{border:1px solid var(--border);background:var(--secondary);overflow-wrap:anywhere;border-radius:12px;gap:.75rem;min-width:0;margin-bottom:1.25rem;padding:1rem;display:grid}.demo-selection-summary h3{margin:0;font-size:1rem}.demo-selection-summary p{min-width:0;margin:0}.demo-selection-summary p:first-of-type{color:var(--muted-foreground)}.demo-selection-summary .button{justify-self:start}.recording-studio :is(.demo-settings,.demo-capture-panel):focus{outline:2px solid var(--primary);outline-offset:-4px;scroll-margin-top:160px}.recording-studio :is(.demo-section-nav,.demo-selection-summary) .button{white-space:normal;overflow-wrap:anywhere;min-width:44px;max-width:100%;min-height:44px}@container (width<=960px){.recording-studio .demo-studio-grid{grid-template-columns:minmax(0,1fr)}}@media (width<=850px){.recording-studio .demo-studio-grid{grid-template-columns:minmax(0,1fr)}.recording-studio .demo-steps{flex-wrap:wrap;gap:.75rem}.recording-studio .demo-steps li{overflow-wrap:anywhere;min-width:0;max-width:100%}.recording-studio .demo-steps li span{flex-shrink:0}.recording-studio :is(.demo-settings,.demo-capture-panel,.demo-capture-heading,.demo-guidance){overflow-wrap:anywhere;min-width:0;max-width:100%}.recording-studio .demo-settings>*,.recording-studio .demo-settings label>*{min-width:0;max-width:100%}.recording-studio :is(.demo-settings,.demo-actions,.demo-existing) .button{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}.recording-studio .demo-viewport:has(.demo-camera-placeholder){aspect-ratio:auto;min-height:220px}.recording-studio .demo-viewport:has(.demo-camera-placeholder) video{position:absolute;inset:0}.recording-studio .demo-camera-placeholder{overflow-wrap:anywhere;gap:12px;min-height:220px;padding:16px;position:relative;inset:auto}.recording-studio .demo-camera-placeholder svg{width:48px;height:48px}}@media (width<=600px){.recording-studio :is(.demo-settings,.demo-capture-panel,.demo-selection-summary){padding:12px}.recording-studio :is(.demo-section-nav,.demo-selection-summary) .button{padding-inline:12px}}}