:root{--osr-bg-main:#020617;--osr-bg-card:rgba(15,23,42,.7);--osr-bg-card-border:hsla(0,0%,100%,.1);--osr-primary:#3b82f6;--osr-primary-hover:#2563eb;--osr-accent:#8b5cf6;--osr-success:#10b981;--osr-danger:#ef4444;--osr-text-main:#f8fafc;--osr-text-muted:#94a3b8;--osr-glass-bg:rgba(15,23,42,.82);--osr-glass-border:hsla(0,0%,100%,.08)}.onscreen-recorder-container{-webkit-font-smoothing:antialiased;background:var(--osr-bg-main);background-image:radial-gradient(at 0 0,rgba(59,130,246,.08) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.08) 0,transparent 50%);color:var(--osr-text-main);font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;padding:2.5rem 1.5rem}.onscreen-recorder-container.onscreen-recorder-embed{min-height:0;padding:1rem}.onscreen-recorder-wrapper{margin:0 auto;max-width:1200px}.onscreen-recorder-header{margin-bottom:2.5rem;text-align:center}.onscreen-recorder-embed .onscreen-recorder-header{margin-bottom:1.5rem}.onscreen-recorder-title{align-items:center;color:var(--osr-text-main);display:flex;font-size:2.5rem;font-weight:800;gap:.75rem;justify-content:center;letter-spacing:-.02em;margin:0 0 .5rem}.onscreen-recorder-embed .onscreen-recorder-title{font-size:1.5rem}.onscreen-recorder-title-icon{color:var(--osr-primary);filter:drop-shadow(0 0 10px rgba(59,130,246,.4));flex-shrink:0;height:2.5rem;width:2.5rem}.onscreen-recorder-embed .onscreen-recorder-title-icon{height:2rem;width:2rem}.onscreen-recorder-subtitle{color:var(--osr-text-muted);font-size:1rem;font-weight:400;margin:0;opacity:.9}.onscreen-recorder-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}@media (min-width:1024px){.onscreen-recorder-grid:not(.onscreen-recorder-grid-single){grid-template-columns:repeat(2,1fr)}}.onscreen-recorder-grid-single{max-width:100%}.onscreen-recorder-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--osr-bg-card);border:1px solid var(--osr-bg-card-border);border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),inset 0 0 20px hsla(0,0%,100%,.02);padding:1.75rem;transition:transform .2s ease,box-shadow .2s ease}.onscreen-recorder-card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.2),0 10px 10px -5px rgba(0,0,0,.1),inset 0 0 20px hsla(0,0%,100%,.03)}.onscreen-recorder-card-title{color:var(--osr-text-main);font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .75rem}.onscreen-recorder-card-hint{color:var(--osr-text-muted);font-size:.875rem;line-height:1.5;margin:0 0 1.25rem}.onscreen-recorder-controls{display:flex;flex-direction:column;gap:1rem}.onscreen-recorder-toggles{display:flex;flex-wrap:wrap;gap:.5rem}.onscreen-recorder-toggle{align-items:center;background:var(--osr-bg-card-border);border:1px solid transparent;border-radius:.75rem;color:var(--osr-text-muted);cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.625rem 1rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.onscreen-recorder-toggle:hover{background:hsla(0,0%,100%,.1);color:var(--osr-text-main);transform:translateY(-1px)}.onscreen-recorder-toggle-on{background:rgba(16,185,129,.1);border-color:var(--osr-success);box-shadow:0 0 15px rgba(16,185,129,.15);color:var(--osr-success)}.onscreen-recorder-toggle-on:hover{background:rgba(16,185,129,.2)}.onscreen-recorder-actions{margin-top:.5rem}.onscreen-recorder-button-group{display:flex;flex-wrap:wrap;gap:1rem}.onscreen-recorder-toolbar{align-items:center;background:hsla(0,0%,100%,.03);border:1px solid var(--osr-bg-card-border);border-radius:.75rem;display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem}.onscreen-recorder-button{align-items:center;border:none;border-radius:.75rem;cursor:pointer;display:flex;font-size:.9375rem;font-weight:700;gap:.625rem;justify-content:center;letter-spacing:.01em;padding:.875rem 1.75rem;text-transform:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.onscreen-recorder-button-primary{background:linear-gradient(135deg,var(--osr-primary),var(--osr-accent));box-shadow:0 4px 14px 0 rgba(59,130,246,.39);color:#fff;flex:1}.onscreen-recorder-button-primary:hover{box-shadow:0 6px 20px rgba(59,130,246,.5);filter:brightness(1.1);transform:translateY(-2px)}.onscreen-recorder-button-secondary{backdrop-filter:blur(4px);background-color:var(--osr-bg-card-border);color:#fff}.onscreen-recorder-button-secondary:hover{background-color:hsla(0,0%,100%,.15);transform:translateY(-1px)}.onscreen-recorder-button-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px 0 rgba(16,185,129,.39);color:#fff;flex:1}.onscreen-recorder-button-success:hover{box-shadow:0 6px 20px rgba(16,185,129,.45);filter:brightness(1.1);transform:translateY(-2px)}.onscreen-recorder-button-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 14px 0 rgba(139,92,246,.39);color:#fff;flex:1}.onscreen-recorder-button-purple:hover{box-shadow:0 6px 20px rgba(139,92,246,.45);filter:brightness(1.1);transform:translateY(-2px)}.onscreen-recorder-button-warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 14px 0 rgba(245,158,11,.39);color:#fff;flex:1}.onscreen-recorder-button-warning:hover{box-shadow:0 6px 20px rgba(245,158,11,.45);filter:brightness(1.1);transform:translateY(-2px)}.onscreen-recorder-button-disabled,.onscreen-recorder-button-purple:disabled{background:#334155;box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.onscreen-recorder-button-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 14px 0 rgba(239,68,68,.39);color:#fff;flex:1}.onscreen-recorder-button-danger:hover{box-shadow:0 6px 20px rgba(239,68,68,.45);filter:brightness(1.1);transform:translateY(-2px)}.onscreen-recorder-button-small{background-color:var(--osr-bg-card-border);border:1px solid transparent;border-radius:.5rem;color:var(--osr-text-main);cursor:pointer;font-size:.8125rem;font-weight:600;padding:.375rem .875rem;transition:all .2s}.onscreen-recorder-button-small:hover{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.1)}.onscreen-recorder-button-icon{height:1.25rem;width:1.25rem}.onscreen-recorder-button-label{font-variant-numeric:tabular-nums}.onscreen-recorder-camera-preview{background:rgba(0,0,0,.4);border:1px solid var(--osr-bg-card-border);border-radius:1rem;box-shadow:inset 0 0 10px rgba(0,0,0,.5);margin-top:1rem;padding:1rem}.onscreen-recorder-camera-preview-label{align-items:center;color:var(--osr-text-muted);display:flex;font-size:.7rem;font-weight:700;gap:.5rem;letter-spacing:.1em;margin:0 0 .75rem;text-transform:uppercase}.onscreen-recorder-camera-preview-label:before{background:var(--osr-success);border-radius:50%;box-shadow:0 0 8px var(--osr-success);content:"";display:block;height:6px;width:6px}.onscreen-recorder-camera-preview-video{aspect-ratio:16/9;background:#000;border:1px solid hsla(0,0%,100%,.05);border-radius:.75rem;display:block;max-width:280px;object-fit:cover;width:100%}.onscreen-recorder-camera-section{margin-top:.5rem}.onscreen-recorder-recording{animation:onscreen-recorder-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes onscreen-recorder-pulse{0%,to{opacity:1}50%{opacity:.8}}.onscreen-recorder-video-section{display:flex;flex-direction:column;gap:.75rem}.onscreen-recorder-video-title{color:#fff;font-size:1.125rem;font-weight:500;margin:0}.onscreen-recorder-video{background-color:#000;border-radius:.5rem;width:100%}.onscreen-recorder-empty-state{background:hsla(0,0%,100%,.02);border:1px dashed var(--osr-bg-card-border);border-radius:1rem;padding:3rem 2rem;text-align:center;transition:all .3s ease}.onscreen-recorder-empty-state:hover{background:hsla(0,0%,100%,.03);border-color:hsla(0,0%,100%,.15)}.onscreen-recorder-empty-icon{color:var(--osr-bg-card-border);display:block;height:4rem;margin:0 auto 1.25rem;opacity:.5;width:4rem}.onscreen-recorder-empty-text{color:var(--osr-text-main);font-size:1.125rem;font-weight:600;margin:0}.onscreen-recorder-empty-subtext{color:var(--osr-text-muted);font-size:.9375rem;margin:.5rem 0 0;opacity:.8}.onscreen-recorder-recording-indicator{backdrop-filter:blur(8px);background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.3);border-radius:1rem;padding:2.5rem 2rem;text-align:center}.onscreen-recorder-recording-dot{animation:onscreen-recorder-pulse 1.5s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--osr-danger);border-radius:50%;box-shadow:0 0 20px var(--osr-danger);height:1.25rem;margin:0 auto 1rem;width:1.25rem}.onscreen-recorder-recording-time{color:#fff;font-family:JetBrains Mono,ui-monospace,monospace;font-size:3.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;margin:.75rem 0 1.25rem;text-shadow:0 0 30px hsla(0,0%,100%,.15)}.onscreen-recorder-recording-text{color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:.02em;margin:0}.onscreen-recorder-recording-subtext{color:hsla(0,0%,100%,.7);font-size:.9375rem;font-weight:500;margin:.75rem 0 0}.onscreen-recorder-console-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.onscreen-recorder-console{background-color:#020617;border:1px solid var(--osr-bg-card-border);border-radius:.75rem;box-shadow:inset 0 2px 10px rgba(0,0,0,.5);font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace;font-size:.8125rem;height:24rem;overflow-y:auto;padding:1rem}.onscreen-recorder-console::-webkit-scrollbar{width:6px}.onscreen-recorder-console::-webkit-scrollbar-track{background:transparent}.onscreen-recorder-console::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border-radius:3px}.onscreen-recorder-console::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.2)}.onscreen-recorder-console-empty{color:var(--osr-text-muted);margin:0;opacity:.5}.onscreen-recorder-logs{display:flex;flex-direction:column;gap:.375rem}.onscreen-recorder-log{display:flex;gap:.75rem;line-height:1.5;padding:.125rem 0}.onscreen-recorder-log-timestamp{color:var(--osr-text-muted);opacity:.4;white-space:nowrap}.onscreen-recorder-log-icon{display:inline-block;opacity:.8}.onscreen-recorder-log-icon-error{color:var(--osr-danger)}.onscreen-recorder-log-icon-success{color:var(--osr-success)}.onscreen-recorder-log-icon-info{color:var(--osr-primary)}.onscreen-recorder-log-message{flex:1}.onscreen-recorder-log-message-error{color:#fca5a5}.onscreen-recorder-log-message-success{color:#a7f3d0}.onscreen-recorder-log-message-info{color:#e2e8f0}.onscreen-recorder-countdown-overlay{align-items:center;display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:9999}.onscreen-recorder-countdown-backdrop{backdrop-filter:blur(8px);background:rgba(0,0,0,.75);inset:0;position:absolute}.onscreen-recorder-countdown-content{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(15,23,42,.9);border:1px solid var(--osr-glass-border);border-radius:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5),inset 0 0 30px hsla(0,0%,100%,.05);min-width:22rem;padding:3rem 4rem;position:relative;text-align:center}.onscreen-recorder-countdown-label{color:var(--osr-text-muted);font-size:1.125rem;font-weight:600;letter-spacing:.02em;margin:0 0 1.5rem}.onscreen-recorder-countdown-number{-webkit-text-fill-color:transparent;animation:onscreen-recorder-countdown-pop 1s cubic-bezier(.34,1.56,.64,1) infinite;background:linear-gradient(180deg,#60a5fa,#3b82f6);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 30px rgba(59,130,246,.4));font-size:8rem;font-weight:900;line-height:1;margin:0 0 1rem}@keyframes onscreen-recorder-countdown-pop{0%{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(.95)}}.onscreen-recorder-countdown-hint{color:var(--osr-text-muted);font-size:1rem;font-weight:500;margin:0 0 2rem;opacity:.7}.onscreen-recorder-countdown-cancel{flex:none;margin:0 auto}.onscreen-recorder-preparing-indicator{align-items:center;background:rgba(37,99,235,.15);border:1px solid #3b82f6;border-radius:.5rem;display:flex;gap:.75rem;padding:.75rem 1rem}.onscreen-recorder-preparing-dot{animation:onscreen-recorder-pulse 1s ease-in-out infinite;background:#60a5fa;border-radius:50%;height:.5rem;width:.5rem}.onscreen-recorder-preparing-text{color:#93c5fd;font-size:.875rem;font-weight:500;margin:0}.onscreen-recorder-fade-in{animation:onscreen-recorder-fade-in .6s cubic-bezier(.16,1,.3,1)}@keyframes onscreen-recorder-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.onscreen-recorder-permission-warning{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:.75rem;box-shadow:0 4px 20px rgba(239,68,68,.1),inset 0 0 15px rgba(239,68,68,.05);display:flex;flex-direction:column;gap:.75rem;padding:1.25rem}.onscreen-recorder-warning-header{align-items:center;display:flex;gap:.5rem}.onscreen-recorder-warning-icon{filter:drop-shadow(0 0 8px rgba(239,68,68,.4));font-size:1.25rem}.onscreen-recorder-warning-title{color:#fca5a5;font-size:1.1rem;font-weight:700;margin:0}.onscreen-recorder-warning-text{color:var(--osr-text-main);font-size:.9rem;line-height:1.4;margin:0;opacity:.9}.onscreen-recorder-warning-steps{background:rgba(0,0,0,.25);border:1px solid hsla(0,0%,100%,.03);border-radius:.5rem;padding:1rem}.onscreen-recorder-steps-title{color:var(--osr-text-muted);font-size:.85rem;font-weight:600;letter-spacing:.05em;margin:0 0 .5rem;text-transform:uppercase}.onscreen-recorder-steps-list{color:var(--osr-text-main);font-size:.875rem;line-height:1.6;margin:0;padding-left:1.25rem}.onscreen-recorder-steps-list li{margin-bottom:.5rem}.onscreen-recorder-steps-list li:last-child{margin-bottom:0}.onscreen-recorder-os-tip{border-top:1px solid hsla(0,0%,100%,.06);color:#fde047;font-size:.8rem;line-height:1.4;margin-top:.75rem;opacity:.95;padding-top:.75rem}.onscreen-recorder-warning-actions{display:flex;gap:.75rem;margin-top:.25rem}.onscreen-recorder-warning-actions .onscreen-recorder-button{font-size:.875rem;padding:.625rem 1.25rem}