:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthetic:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}body{background-color:#0f172a;min-width:320px;min-height:100vh;margin:0}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}.glass-panel{-webkit-backdrop-filter:blur(16px);background:#0f172a99;border:1px solid #ffffff26;border-top-color:#ffffff40;border-radius:20px;box-shadow:0 8px 32px #00000080}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:10px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1)}button:hover{background-color:#2a2a2a;border-color:#646cff80;transform:translateY(-1px)}button:active{transform:scale(.97)translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}.app-container{background:#000;flex-direction:column;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.video-container{background:#000;flex:1;justify-content:center;align-items:center;width:100%;max-width:100vw;height:100%;max-height:100vh;margin-bottom:180px;display:flex;position:relative;overflow:visible}.portrait-mode .video-container{aspect-ratio:9/16;border-left:2px solid #333;border-right:2px solid #333;width:auto;max-width:100vw;height:calc(100vh - 16px);max-height:calc(100vh - 16px);margin:8px auto;overflow:visible;box-shadow:0 0 50px #000c}.video-element{clip-path:inset(6.5%);width:115%;height:115%;position:absolute;top:-7.5%;left:-7.5%;transform:scaleX(-1);object-fit:cover!important}.canvas-overlay{object-fit:cover;pointer-events:auto;touch-action:none;z-index:10;width:115%;height:115%;transition:box-shadow .15s;position:absolute;top:-7.5%;left:-7.5%;transform:scaleX(-1)}.white-canvas-mode .canvas-overlay,.worksheet-mode .canvas-overlay{object-fit:contain!important;width:100%!important;height:100%!important;top:0!important;left:0!important}.white-canvas-mode .video-element,.worksheet-mode .video-element{object-fit:cover!important;width:100%!important;height:100%!important;top:0!important;left:0!important}.white-canvas-mode .video-container,.worksheet-mode .video-container{margin-bottom:0!important}.canvas-overlay.pen-down{box-shadow:inset 0 0 60px 10px var(--pen-color,#fffc)}.transcript-overlay{z-index:30;white-space:nowrap;text-overflow:ellipsis;color:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;background:#0f172ae6;border:1px solid #fff3;border-radius:20px;max-width:500px;padding:10px 20px;font-size:1.1rem;font-weight:500;position:absolute;bottom:118px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 20px #00000080}.toolbar{z-index:20;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;width:96%;max-width:1200px;padding:6px 14px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.portrait-mode .toolbar{z-index:60;border-radius:14px;flex-direction:column;align-items:stretch;gap:5px;width:auto;min-width:210px;max-width:240px;max-height:calc(100vh - 24px);padding:8px 6px;top:12px;bottom:12px;left:12px;overflow-x:hidden;transform:none;box-shadow:0 10px 30px #000c;overflow-y:auto!important}.portrait-mode .toolbar>*{flex-shrink:0}.portrait-mode .toolbar::-webkit-scrollbar{width:6px}.portrait-mode .toolbar::-webkit-scrollbar-track{background:#0000004d;border-radius:3px}.portrait-mode .toolbar::-webkit-scrollbar-thumb{background:#ffffff59;border-radius:3px}.portrait-mode .toolbar::-webkit-scrollbar-thumb:hover{background:#fff9}.portrait-mode .toolbar .action-btn{box-sizing:border-box;white-space:nowrap;justify-content:flex-start;width:100%;padding:5px 8px;font-size:.8rem}.portrait-mode .toolbar div[style*="width: 1px"]{width:100%!important;height:1px!important;margin:4px 0!important}.portrait-mode .toolbar .slide-controls-wrapper{flex-flow:wrap!important;justify-content:space-between!important;align-items:center!important;gap:6px!important;width:100%!important;display:flex!important}select option{color:#fff!important;background-color:#1e293b!important;padding:8px!important}select option:hover,select option:focus,select option:active,select option:checked{color:#fff!important;background-color:#2563eb!important}.color-btn{cursor:pointer;border:2px solid #fff3;border-radius:50%;width:32px;height:32px;padding:0;transition:all .2s}.color-btn.active{border-color:#fff;transform:scale(1.15);box-shadow:0 0 10px #ffffff80}.action-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;gap:5px;padding:8px 12px;font-size:.85rem;transition:all .2s;display:flex}.action-btn:hover{background:#ffffff26}.action-btn.active-mode{color:#60a5fa;border-color:#3b82f680}.premium-header{z-index:20;align-items:center;gap:16px;padding:12px 24px;display:flex;position:absolute;top:24px;left:24px}.brand-logo{letter-spacing:.5px;background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;display:flex}.status-badge{text-transform:uppercase;letter-spacing:1px;color:#cbd5e1;background:#0000004d;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:.85rem;font-weight:600;display:flex}.recording-pulse{background-color:#ef4444;border-radius:50%;width:12px;height:12px;animation:1.5s infinite pulse;box-shadow:0 0 10px #ef4444}.recording-pulse.paused{background-color:#eab308;animation:none;box-shadow:0 0 10px #eab308}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #ef4444b3}70%{transform:scale(1);box-shadow:0 0 0 10px #ef444400}to{transform:scale(.95);box-shadow:0 0 #ef444400}}.video-container:after{content:"";pointer-events:none;z-index:25;transition:box-shadow .15s;position:absolute;inset:0;box-shadow:inset 0 0 50px 10px #ef444400}.video-container.delete-glow:after{box-shadow:inset 0 0 50px 10px #ef4444cc}.white-canvas-mode .video-container{background:#f8f8f8}.video-element.video-hidden{opacity:0}.video-pip{object-fit:cover;z-index:30;background:#000;border:2px solid #ffffff4d;border-radius:12px;width:180px;height:101px;transition:box-shadow .2s,width .3s,height .3s;position:absolute;bottom:118px;right:24px;transform:scaleX(-1);box-shadow:0 8px 24px #0009}.portrait-mode .video-pip{width:96px;height:170px;bottom:16px;right:14px}.video-pip:hover{box-shadow:0 4px 28px #00000059}.action-btn.active-mode{color:#a5b4fc;background:#6366f14d;border-color:#6366f199}.tooltip-container{display:inline-block;position:relative}.tooltip-text{visibility:hidden;opacity:0;color:#fff;text-align:center;z-index:1000;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#0f172af2;border:1px solid #ffffff1a;border-radius:8px;width:max-content;max-width:200px;padding:8px 12px;font-size:.85em;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;bottom:110%;left:50%;transform:translate(-50%)translateY(5px);box-shadow:0 10px 15px -3px #00000080,0 4px 6px -2px #0000004d}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1;transform:translate(-50%)translateY(0)}.animate-spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){.app-container{height:100dvh}.video-container{margin-bottom:50px!important}.app-container.tray-open .video-container{margin-bottom:220px!important}.worksheet-mode .video-container,.white-canvas-mode .video-container{margin-bottom:50px!important}.app-container.tray-open.worksheet-mode .video-container,.app-container.tray-open.white-canvas-mode .video-container{margin-bottom:220px!important}.transcript-overlay{bottom:60px!important}.app-container.tray-open .transcript-overlay{bottom:230px!important}.video-pip{bottom:16px;right:12px}.portrait-mode .video-pip{width:90px;height:160px;bottom:16px;right:12px}}.mobile-bottom-tray{z-index:40;-webkit-backdrop-filter:blur(16px);background:#0f172af2;border-top:1px solid #fff3;border-radius:16px 16px 0 0;flex-direction:column;align-items:center;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 32px #000000b3}