.card.ripple-1avtzol{padding:12px;border-radius:12px;box-shadow:#0000003d 0 3px 8px}section.ripple-ebigz{display:flex;justify-content:center;align-items:center;gap:16px}.timer.ripple-ebigz{font-size:var(--font-size-lg);font-weight:600;color:var(--black);padding:8px 16px;background:var(--gray-200);border-radius:var(--rounded-sm)}#number-select.ripple-u9bobj{display:flex;flex-direction:column;gap:4px}#input.ripple-u9bobj{display:flex;gap:4px;width:100%}#input.ripple-u9bobj .range:where(.ripple-u9bobj){flex:1}#help-label.ripple-u9bobj{display:flex;gap:4px;align-items:center}#checkbox.ripple-cqxgv3{display:flex;gap:4px}#checkbox.ripple-cqxgv3 label:where(.ripple-cqxgv3){flex:1}article.ripple-1epx182{border-radius:var(--rounded-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:16px;color:var(--black);font-size:var(--font-size-sm);line-height:1.6}article.ripple-1epx182 header:where(.ripple-1epx182){display:flex;align-items:center;gap:8px;padding:12px 16px;background:#0000000d;border-bottom:1px solid var(--gray-300);font-weight:600;text-transform:capitalize}article.ripple-1epx182 header:where(.ripple-1epx182) img:where(.ripple-1epx182){width:24px;height:24px;user-select:none}article.ripple-1epx182 #content:where(.ripple-1epx182){padding:16px;background:var(--white)}article.info.ripple-1epx182{background:color-mix(in srgb,var(--primary) 10%,var(--white))}article.info.ripple-1epx182 header:where(.ripple-1epx182){background:color-mix(in srgb,var(--primary) 20%,var(--white))}article.warning.ripple-1epx182{background:color-mix(in srgb,var(--warning) 10%,var(--white))}article.warning.ripple-1epx182 header:where(.ripple-1epx182){background:color-mix(in srgb,var(--warning) 20%,var(--white))}article.danger.ripple-1epx182{background:color-mix(in srgb,var(--danger) 10%,var(--white))}article.danger.ripple-1epx182 header:where(.ripple-1epx182){background:color-mix(in srgb,var(--danger) 20%,var(--white))}#codec-select.ripple-g7d5qq{display:flex;flex-direction:column;gap:4px}#help-label.ripple-g7d5qq{display:flex;align-items:center;gap:4px}:root{--white: #ffffff;--black: #1a1a1a;--gray-100: #f8fafc;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-700: #474747;--gray-800: #1e1e1e;--gray-900: #151515;--primary: #2563eb;--danger: #dc2626;--warning: #f59e0b;--rounded-sm: 6px;--rounded-md: 12px;--rounded-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);--transition-base: all .2s var(--ease-in-out-expo);--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100vh;background:var(--gray-100);color:var(--black);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Adwaita Sans,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;justify-content:center;align-items:center;line-height:1.5}main{padding:12px;margin:auto 0;max-width:840px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px}button{cursor:pointer;transition:var(--transition-base);border:none;outline:none;display:flex;justify-content:center;align-items:center;border-radius:var(--rounded-sm);padding:10px 20px;background:var(--gray-200);font-size:var(--font-size-base);font-weight:500;&:hover{background:var(--gray-300);transform:translateY(-1px)}&:active{transform:translateY(0)}&.danger{background:var(--danger);color:var(--white);&:hover{background:color-mix(in srgb,var(--danger) 90%,var(--black))}}&:disabled{opacity:.5;pointer-events:none;font-size:var(--font-size-sm)}&.icon-button{background:transparent;padding:8px;border-radius:var(--rounded-full);&:hover{background:var(--gray-200);transform:scale(1.05)}&:active{transform:scale(.95)}}}.screen-center{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;min-height:100vh;padding:24px}#preview{aspect-ratio:16/9;width:100%;max-width:800px;margin-bottom:24px;display:flex;justify-content:center;align-items:center;position:relative;border-radius:var(--rounded-md);overflow:hidden;box-shadow:var(--shadow-md);& video{width:100%;height:100%;object-fit:cover}#alert{cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;gap:8px;border-radius:var(--rounded-md);background:var(--gray-200);padding:16px;transition:var(--transition-base);&:hover{background:var(--gray-300)}&:active{background:var(--gray-400)}& img{user-select:none;width:48px;height:48px;transition:var(--transition-base)}}#stop-preview-button{position:absolute;top:12px;right:12px;z-index:10}}#settings-section{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}dialog::backdrop{position:fixed;inset:0;background:#0000004d;backdrop-filter:blur(4px)}.help-dialog{border:none;border-radius:var(--rounded-md);padding:24px;min-width:320px;max-width:480px;background:var(--white);box-shadow:var(--shadow-md);animation:slideIn .3s var(--ease-in-out-expo);justify-self:center;align-self:center;& article{margin-top:12px;font-size:var(--font-size-sm);line-height:1.6;white-space:pre-wrap}& form{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center}}.help-dialog:open{display:flex;flex-direction:column;gap:12px}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#main-button{width:60px;height:60px;border:none;outline:none;border-radius:var(--rounded-full);display:flex;justify-content:center;align-items:center;transition:var(--transition-base);box-shadow:var(--shadow-sm);font-size:var(--font-size-base);font-weight:500;&.start{background:var(--primary)}&.start:hover{background:color-mix(in srgb,var(--primary) 90%,var(--black))}&.recording{background:var(--gray-200)}&.recording:hover{background:var(--gray-300)}&.paused{background:color-mix(in srgb,var(--danger) 20%,var(--white))}&.paused:hover{background:color-mix(in srgb,var(--danger) 30%,var(--white))}&:hover{transform:translateY(-2px)}&:active{transform:scale(.95)}&:disabled{opacity:.5;pointer-events:none}& strong{color:var(--white);font-size:var(--font-size-lg)}& img{width:24px;height:24px;user-select:none}}#stop-button{width:40px;height:40px;background:var(--gray-200);border-radius:var(--rounded-full);transition:var(--transition-base);&:hover{background:var(--gray-300);transform:translateY(-2px)}&:hover &:active{transform:scale(.95)}& img{width:20px;height:20px}}@media (prefers-color-scheme: dark){html,body{background:var(--gray-800);color:var(--white)}#preview #alert{background:var(--gray-900);backdrop-filter:invert(1);& img{filter:invert(1)!important}&:hover{background:var(--gray-700)}&:active{backdrop-filter:brightness(10%)}}.help-dialog{background:var(--gray-800);color:var(--white);& form img{filter:invert(1)}}button{&.icon-button{&:hover{background:var(--gray-700)}}}#stop-button{filter:invert(1)}input{background:var(--gray-900);color:var(--white);border:none}}