:root{--light-bg: rgba(255, 255, 255, .8);--light-border: rgba(255, 255, 255, .18);--light-text: #333;--light-shadow: rgba(0, 0, 0, .1);--dark-bg: rgba(0, 0, 0, .75);--dark-border: rgba(255, 255, 255, .1);--dark-text: #fff;--dark-shadow: rgba(0, 0, 0, .3)}html,body{display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%;height:100%}.theme-toggle{position:fixed;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;transition:all .3s ease}.theme-toggle.light{background:var(--light-bg);color:var(--light-text);box-shadow:0 2px 8px var(--light-shadow)}.theme-toggle.dark{background:var(--dark-bg);color:var(--dark-text);box-shadow:0 2px 8px var(--dark-shadow)}.theme-toggle:hover{transform:scale(1.1)}.island-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center}.island{position:relative;width:600px;height:40px;background-color:#fff;border-radius:5px;border:1px solid #ccc;display:flex;align-items:center;justify-content:space-between;padding:0 10px;overflow:hidden;flex-direction:row}.island-text-container{width:85%;overflow:hidden;margin-left:0;margin-right:auto;text-align:center}.island-text{position:relative;left:0;color:#000;font-size:13px;white-space:nowrap;display:inline-block}.play-button{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;position:relative;box-shadow:none;flex-shrink:0;margin-right:auto;margin-left:0;display:flex;align-items:center;justify-content:center;background-color:#007bff;color:#fff;transition:background-color .3s ease,transform .3s ease;outline:none}.play-button:hover{background-color:#0056b3;transform:scale(1.05)}.play-button:active{transform:scale(.95)}.play-button.playing{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #007bffb3}70%{transform:scale(1.1);box-shadow:0 0 0 10px #007bff00}to{transform:scale(1);box-shadow:0 0 #007bff00}}.nav-buttons{display:flex;gap:3px;flex-shrink:0;margin-left:0}.nav-buttons button{width:20px;height:20px;background-color:#000;border:1px solid #ccc;border-radius:5px;cursor:pointer;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.nav-buttons button:disabled{opacity:.5;cursor:not-allowed}.ball-container{position:fixed;bottom:20px;right:40px;display:flex;flex-direction:column;align-items:center;z-index:1000}.btn{padding:15px 40px;border:none;outline:none;color:#fff;cursor:pointer;position:relative;z-index:0;border-radius:50%;width:100px;height:100px;display:flex;justify-content:center;align-items:center;text-align:center;transition:all .3s ease;box-shadow:inset 0 -7px 15px 11px #0c0c0c96;transform:translateY(0)}.btn:after{content:"";z-index:-1;position:absolute;width:100%;height:100%;background-color:#333;left:0;top:0;border-radius:50%}.btn:before{content:"";background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#ff00c8,red);position:absolute;top:-2px;left:-2px;background-size:600%;z-index:-1;width:calc(100% + 4px);height:calc(100% + 4px);filter:blur(10px);animation:glowing var(--animation-speed) linear infinite;transition:opacity .3s ease-in-out;border-radius:50%;opacity:0}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}.btn:before{opacity:1}.btn:after{background:transparent}.btn{color:#000;font-weight:700}.options-container{display:flex;flex-direction:column;margin-bottom:10px;position:absolute;top:-120px;left:50%;transform:translate(-50%)}.option-button{padding:10px 15px;margin:5px 0;border:none;border-radius:5px;cursor:pointer;background-color:#f0f0f0;color:#333;font-size:.9em;transition:background-color .3s ease;white-space:nowrap}.option-button:hover{background-color:#e0e0e0}#videoElement{width:640px;height:480px;border-radius:20px}#canvasElement{display:none;width:640px;height:480px}.demo-content{padding:20px;display:flex;flex-direction:row;align-items:flex-start;gap:20px;justify-content:center}.video-section{display:flex;flex-direction:column;align-items:center}.button-group{margin-bottom:20px}#chatLog{width:400px;height:560px;overflow-y:auto;border:1px solid #ddd;border-radius:8px;padding:16px;margin-top:0;background-color:#f5f5f5}#chatLog p{margin:8px 0;padding:12px;border-radius:8px;background-color:#fff;box-shadow:0 1px 3px #0000001f}#chatLog p:nth-child(odd){background-color:#e8eaf6}.pdf-section{display:flex;flex-direction:column;align-items:center}#pdfPreview{width:640px;height:480px;border:1px solid #ddd;border-radius:20px;margin-bottom:20px}.file-upload{margin-bottom:20px}#pdf-container{margin-top:20px;width:640px;height:480px;max-width:800px;display:none}.container{position:relative;width:100vw;height:100vh;background:linear-gradient(to bottom right,#1a202c,#000);display:flex;align-items:center;justify-content:center}.assistant-group{position:relative;width:100px;height:100px}.rainbow-ball{width:100px;height:100px;border-radius:50%;transition:all .3s ease;position:absolute;top:0;left:0}.assistant{position:absolute;transition:all .5s cubic-bezier(.4,0,.2,1);opacity:0;color:#4a5568;filter:drop-shadow(0 0 10px rgba(255,255,255,.5));transform:scale(.5);z-index:10;cursor:pointer;box-shadow:0 2px 4px #0003;background:#fff;padding:10px;border-radius:50%;width:auto;border:none}.assistant-conversation-icon{top:0;left:50%;transform:translate(-50%) scale(.5)}.assistant-stop-conversation{top:50%;left:0;transform:translateY(-50%) scale(.5)}.assistant-group:hover .assistant-conversation-icon{opacity:1;transform:translate(-50%,-150%) scale(1)}.assistant-group:hover .assistant-stop-conversation{opacity:1;transform:translate(-150%,-50%) scale(1)}.presenter-island-container{position:fixed;bottom:0;transform:translate(-50%) scale(1);width:100%;z-index:1000;overflow:hidden;transition:opacity .3s ease;transition:all .3s cubic-bezier(.4,0,.2,1)}.presenter-island-container:hover{opacity:1;transform:translate(-50%) scale(1);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.presenter-island{width:100%;border-radius:8px 8px 0 0/8px 8px 0px 0px;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;padding:4px 0;position:relative;transform-origin:bottom;transition:transform .3s cubic-bezier(.4,0,.2,1);--z-index-bg: calc(var(--z-index-root) + 1);--z-index-timeline: calc(var(--z-index-root) + 2);--z-index-controls: calc(var(--z-index-root) + 3);--z-index-hover: calc(var(--z-index-root) + 4);isolation:isolate;--z-index-root: 1000;--z-index-base: var(--z-index-root);--z-index-background: calc(var(--z-index-base) + 1);--z-index-timeline: calc(var(--z-index-base) + 2);--z-index-controls: calc(var(--z-index-base) + 3)}.presenter-island.hidden{transform:translateY(100%)}.timeline-player{flex:1;min-width:0;display:flex;align-items:center;padding:12px 60px 12px 140px;overflow:visible;--hover-transition: .3s cubic-bezier(.4, 0, .2, 1);--timeline-width: 70%;--timeline-offset: 50%;--timeline-padding: 8px;--control-padding: 120px;transform:translateZ(0);--control-spacing: 24px;--z-index-base: 1;--z-index-background: 1;--z-index-timeline: 2;--z-index-controls: 3;--transition-transform: translate3d(-50%, 0, 0);--hover-scale: .995;--background-padding: 12px;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;isolation:isolate;transform-style:preserve-3d;position:relative}.timeline-player:before{content:"";position:absolute;top:0;left:50%;width:calc(70% + 200px);height:100%;background:#fffffffa;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .25s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;transform:translate(-50%) scale(.98);transform-origin:center;z-index:1;border:1px solid rgba(255,255,255,.1);border-radius:12px;pointer-events:none;opacity:.92;will-change:width,opacity,backdrop-filter;backface-visibility:hidden;perspective:1000px;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background:#fffffff2}.timeline-player:hover:before{left:50%;width:100%;opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translate(-50%) scale(1)}.presenter-island-container.light .timeline-player:before{background:#fffffff2}.presenter-island-container.light .timeline-bar{background:#0003}.presenter-island-container.light .timeline-progress{background:var(--primary-color, #0066cc)}.presenter-island-container.light .nav-button,.presenter-island-container.light .playback-button{background:var(--primary-color, #0066cc);color:#fff}.presenter-island-container.light .close-button{color:#000}.presenter-island-container.dark .timeline-player:before{background:#000000bf;border:1px solid rgba(255,255,255,.1)}.presenter-island-container.dark .timeline-bar{background:#fff3}.presenter-island-container.dark .timeline-progress{background:var(--primary-color, #3b82f6)}.presenter-island-container.dark .nav-button,.presenter-island-container.dark .playback-button,.presenter-island-container.dark .close-button{background:var(--primary-color, #3b82f6);color:#fff}.presenter-island-container.dark .close-button{color:#fff}.presenter-island-container.dark .nav-button:hover:not(:disabled),.presenter-island-container.dark .playback-button:hover:not(:disabled),.presenter-island-container.dark .close-button:hover{background:var(--primary-color, #2563eb)}.presenter-island-container.dark .nav-button:focus-visible,.presenter-island-container.dark .playback-button:focus-visible,.presenter-island-container.dark .close-button:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.controls-container{display:flex;align-items:center;gap:4px;width:95%;min-width:0;margin:0 auto;height:28px;position:static;z-index:1}.left-controls,.right-controls{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding:4px;background:none;z-index:12}.left-controls{left:calc(15% - 80px);gap:12px}.right-controls{right:calc(15% - 80px)}.timeline-player .left-controls,.timeline-player .right-controls,.timeline-player .close-button{opacity:1;transition:opacity var(--hover-transition),background-color var(--hover-transition);will-change:opacity,transform;transition-delay:0s}.timeline-player:hover .left-controls,.timeline-player:hover .right-controls{opacity:1}.left-controls:hover,.right-controls:hover{opacity:1!important}.timeline-player:hover .left-controls,.timeline-player:hover .right-controls,.timeline-player:hover .close-button{opacity:1;transition-delay:.05s}.timeline-player:hover .left-controls:hover,.timeline-player:hover .right-controls:hover,.timeline-player:hover .close-button:hover{opacity:1;transition-delay:0s}.navigation-controls{display:flex;gap:8px;margin-right:12px;align-items:center}.nav-button,.playback-button{background:var(--primary-color, #2563eb);color:#fff;width:32px;height:32px;border-radius:8px;font-size:.9em;box-shadow:0 2px 4px #00000026}.nav-button:disabled{opacity:.4;cursor:not-allowed}.nav-button:not(:disabled):hover{opacity:1;transform:scale(1.1);background:var(--primary-color, #0066cc)}.playback-button:hover{background:var(--primary-color, #0066cc)}.playback-button:disabled{opacity:.4;cursor:not-allowed}.presenter-island-container.light .playback-button{color:#e9e9e9}.presenter-island-container.dark .playback-button{color:#fff}.close-button{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:32px;height:32px;z-index:var(--z-index-controls);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--primary-color, #2563eb);border:none;color:#fff;cursor:pointer;opacity:1;pointer-events:auto;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;position:relative;font-size:.9em;box-shadow:0 2px 4px #00000026;transition:all .2s ease}.timeline-player:hover .close-button{opacity:1}.timeline-player:hover .close-button:hover{opacity:1;background:var(--primary-color, #1d4ed8);transform:translateY(-50%) scale(1.05)}.error-message{color:#f44;font-size:12px;margin-top:8px;text-align:center}.presenter-island-container.light .error-message{color:#d32f2f}.presenter-island-container.dark .error-message{color:#ff6b6b}.timeline-bar{position:relative;height:6px;background:#0000004d;border-radius:3px;cursor:pointer;width:70%;margin:0 auto;transform:translateZ(0);z-index:var(--z-index-timeline);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;isolation:isolate}.timeline-bar:hover{transform:scaleY(1.25);transition:transform var(--hover-transition)}.timeline-bar:after{content:"";position:absolute;top:50%;left:var(--hover-x, 0);width:1px;height:12px;background:var(--hover-indicator, rgba(255, 255, 255, .3));transform:translate(-50%,-50%) scaleY(0);transition:transform var(--hover-transition);pointer-events:none;backface-visibility:hidden;will-change:transform;z-index:calc(var(--z-index-timeline) + 1);opacity:.5;transform-origin:center}.timeline-bar:hover:after{transform:translate(-50%,-50%) scaleY(1)}.presenter-island-container.light .timeline-bar{--hover-indicator: rgba(0, 0, 0, .3)}.timeline-progress{position:absolute;height:100%;background:var(--primary-color, #2563eb);box-shadow:0 1px 3px #0003;border-radius:inherit;pointer-events:none;max-width:100%;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform:translateZ(0);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;z-index:11}.timeline-marker-container{z-index:2}.left-controls,.right-controls,.close-button{z-index:var(--z-index-controls);backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform:translateZ(0);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.nav-button:hover,.playback-button:hover,.close-button:hover{transition-delay:0s;background:#ffffff26}.timeline-marker{position:absolute;width:4px;height:4px;background:#fffc;border-radius:50%;transform:translate(-50%,-50%);top:50%;z-index:var(--z-index-hover);transition:transform .2s ease,background-color .2s ease;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;pointer-events:auto;transform:translateZ(0);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.timeline-marker:hover{transform:translate(-50%,-50%) scale(1.8);background:var(--primary-color, #007bff)}.presenter-island-container.light .timeline-marker{background:#00000080}.presenter-island-container.light .timeline-marker:hover{background:var(--primary-color, #007bff)}.timeline-player *{pointer-events:none}.timeline-bar,.left-controls,.right-controls,.close-button,.timeline-marker{pointer-events:auto}.nav-button,.playback-button{opacity:0;transform:scale(.95);transition:all .2s cubic-bezier(.4,0,.2,1)}.timeline-player:hover .nav-button,.timeline-player:hover .playback-button{opacity:.85;transform:scale(1)}.nav-button:hover:not(:disabled),.playback-button:hover:not(:disabled){background:var(--primary-color, #0066cc);opacity:.9;transform:scale(1.05)}.nav-button:disabled{opacity:.4;transform:scale(.95);cursor:not-allowed}.nav-button:focus-visible,.playback-button:focus-visible,.close-button:focus-visible{outline:2px solid var(--primary-color, #007bff);outline-offset:2px}.timeline-player .left-controls,.timeline-player .right-controls,.timeline-player .nav-button,.timeline-player .playback-button{opacity:1;transform:none;transition:transform .2s ease,background-color .2s ease}.timeline-player:hover .nav-button,.timeline-player:hover .playback-button{opacity:1;transform:none}.nav-button:hover:not(:disabled),.playback-button:hover:not(:disabled){background:#00000040;transform:scale(1.05)}.presenter-island-container.light .nav-button,.presenter-island-container.light .playback-button,.presenter-island-container.dark .nav-button,.presenter-island-container.dark .playback-button{background:var(--primary-color, #2563eb);color:#fff}.timeline-player{width:100%;overflow:visible;position:relative}.timeline-bar{position:relative;width:100%;height:4px;background:#fff3;border-radius:2px;cursor:pointer;margin:20px 0}.timeline-progress{position:absolute;height:100%;background:#4caf50;border-radius:2px;transition:width .1s linear;width:var(--progress-width, 0%)}.timeline-marker-container{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;top:-2px;height:60px;transition:height .3s ease}.timeline-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none;margin-bottom:5px}.timeline-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:rgba(0,0,0,.8) transparent transparent transparent}.timeline-marker-container:hover .timeline-tooltip{opacity:1}.timeline-marker{width:8px;height:8px;border-radius:50%;background-color:#666;transition:background-color .3s ease}.flag-pole{position:absolute;top:4px;width:2px;background-color:#666;transition:all .3s ease;opacity:0}.timeline-marker-container:hover .flag-pole{opacity:1}.flag{position:absolute;left:0;background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:all .3s ease;transform-origin:right center;transform:translate(-100%,-50%);z-index:1;text-align:left;margin-left:-3px}.flag:after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:5px 0 5px 5px;border-color:transparent transparent transparent rgba(0,0,0,.8)}.timeline-bar:hover .flag{opacity:1}.timeline-bar:hover .timeline-marker{transform:scale(1.2)}.timeline-bar:hover .flag-pole{opacity:1}.timeline-bar:not(.show-flags) .flag,.timeline-bar:not(.show-flags) .flag-pole{display:none}.timeline-bar.show-flags:hover .flag,.timeline-bar.show-flags:hover .flag-pole{opacity:1}.timeline-marker-container:nth-child(3n) .flag-pole{height:30px}.timeline-marker-container:nth-child(3n) .flag{top:30px}.timeline-marker-container:nth-child(3n+1) .flag-pole{height:45px}.timeline-marker-container:nth-child(3n+1) .flag{top:45px}.timeline-marker-container:nth-child(3n+2) .flag-pole{height:60px}.timeline-marker-container:nth-child(3n+2) .flag{top:60px}.marker-tooltip{position:absolute;top:3px;right:calc(100% + 5px);transform:translateY(-50%);background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:all .3s ease;pointer-events:none;z-index:10}.marker-tooltip:after{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);border-width:4px;border-style:solid;border-color:transparent transparent transparent rgba(0,0,0,.8)}.timeline-marker-container:hover .marker-tooltip{opacity:1;transform:translateY(-50%) translate(-2px)}.timeline-marker-container:hover .timeline-marker{transform:scale(1.2);z-index:11}