body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#e8ecf2;height:100%;width:100%;overflow:hidden}.App{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:calc(var(--vh, 1vh) * 100);width:100%}@media (min-width: 768px){body,html{background-color:#e0e5ec}}.App h1{color:#1a1a1a;margin-bottom:1.5rem;text-align:center}.status-container{margin-bottom:1rem;padding:.75rem;border:.0625rem solid #ccc;border-radius:.5rem;background-color:#fff;min-width:15.625rem;text-align:center}.status-container p{margin-bottom:.25rem}.controls-container{display:flex;gap:1rem;margin-bottom:1.5rem}.controls-container button{padding:.75rem 1.5rem;font-size:1rem;border:none;border-radius:.5rem;cursor:pointer;background-color:#007bff;color:#fff;transition:background-color .2s ease;min-width:7.5rem;min-height:2.75rem}.controls-container button:disabled{background-color:#ccc;cursor:not-allowed}.controls-container button:not(:disabled):hover{background-color:#0056b3}.transcript-container{width:100%;background-color:#fff;border:.0625rem solid #ddd;border-radius:.5rem;padding:1rem;flex-grow:1;display:flex;flex-direction:column;max-height:60vh}.transcript-container h2{margin-bottom:.5rem;text-align:center;font-size:1.2rem}.transcript-box{flex-grow:1;overflow-y:auto;padding:.5rem;border:.0625rem solid #eee;border-radius:.25rem}.message{margin-bottom:.75rem;padding:.5rem .75rem;border-radius:.9375rem;max-width:80%;word-wrap:break-word}.message.user{background-color:#d1e7fd;color:#052c65;margin-left:auto;border-bottom-right-radius:0}.message.agent{background-color:#e2e3e5;color:#383d41;margin-right:auto;border-bottom-left-radius:0}.captions-container{position:relative;width:100%;margin:0;padding:0;z-index:10;transition:all .3s ease;animation:fade-in .4s ease;display:flex;justify-content:flex-start;align-items:flex-start}@keyframes fade-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.captions-text strong{color:#2c5282;font-weight:600}.captions-text{color:#333;font-size:1.375rem;line-height:1.5;text-align:left;font-weight:600;letter-spacing:.01em;max-height:2.6em;overflow-y:hidden;word-break:break-word;min-height:1.5rem;display:inline-block;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;padding:0;margin:0;text-shadow:0rem .0625rem .0625rem rgba(255,255,255,.5);scrollbar-width:none;-ms-overflow-style:none;width:100%}.captions-text::-webkit-scrollbar{display:none}.caption-char{display:inline-block;animation:char-fade-in .1s ease-in}.typing-cursor{display:inline-block;width:.1875rem;height:1.1em;margin-left:.25rem;vertical-align:middle;background-color:#333;animation:blink .9s ease-in-out infinite;position:relative;top:.0625rem;opacity:.8}@keyframes blink{0%,to{opacity:.8}50%{opacity:0}}.mobile-container{width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);margin:0;overflow:hidden;display:flex;flex-direction:column;background-color:#e8ecf2;position:relative;touch-action:manipulation;padding-bottom:env(safe-area-inset-bottom,0px)}@media (min-width: 768px){.mobile-container{max-width:31.25rem;height:90vh;margin:1.25rem auto;border-radius:1.5rem;box-shadow:0 .75rem 1.875rem #00000026;padding-bottom:0}}.header{display:flex;align-items:center;justify-content:center;padding:1.25rem 1rem;background-color:#e8ecf2;position:relative;box-shadow:none;z-index:10}.avatar-container{width:clamp(2.5rem,7vw,3rem);height:clamp(2.5rem,7vw,3rem);border-radius:50%;background-color:#e8ecf2;box-shadow:.25rem .25rem .5rem #a3b1c680,-.25rem -.25rem .5rem #fffc;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-right:clamp(.5rem,2vw,.75rem);box-sizing:border-box}.avatar-icon{width:60%;height:60%;color:#5d7b9e}.avatar-image-header{width:100%;height:100%;border-radius:50%;object-fit:cover}.instructor-name{font-size:1.125rem;font-weight:600;color:#456;text-shadow:.0625rem .0625rem .0625rem rgba(255,255,255,.5)}.content-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.75rem,2vw,1rem) clamp(.75rem,2vw,1rem);overflow-y:auto;background-color:#e8ecf2;min-height:0;position:relative;flex-grow:1}.image-container{display:flex;align-items:center;justify-content:center;width:95%;max-width:28rem;height:clamp(48vh,63vh,73vh);margin:0 auto;position:relative;border-radius:1rem;overflow:hidden;flex-shrink:0}.captions-area{padding:.75rem 1.5625rem;background-color:transparent;min-height:3.75rem;display:flex;align-items:center;justify-content:center;width:100%;margin-top:1rem;margin-bottom:1rem;transition:all .3s ease;overflow:hidden;flex-shrink:0}.processing-indicator{display:flex;align-items:center;justify-content:center}.processing-indicator span{display:inline-block;width:.5rem;height:.5rem;margin:0 .1875rem;border-radius:50%;background-color:#888;animation:processing-dots 1.4s infinite ease-in-out both}.processing-indicator span:nth-child(1){animation-delay:-.32s}.processing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes processing-dots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.camera-click-button{cursor:pointer;transition:all .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:#e8ecf2;border:none;outline:none;box-shadow:.1875rem .1875rem .375rem #a3b1c680,-.1875rem -.1875rem .375rem #fffc;flex-shrink:0;min-width:60px;min-height:60px;width:60px!important;height:60px!important;position:relative;z-index:1}.camera-click-button:focus{outline:none}.camera-click-button:active{transform:scale(.95);box-shadow:inset .1875rem .1875rem .3125rem #a3b1c680,inset -.1875rem -.1875rem .3125rem #fffc}.camera-click-button:hover:not(:active):not(.active){transform:translateY(-.125rem)}.camera-click-button.active{box-shadow:inset .25rem .25rem .5rem #a3b1c680,inset -.25rem -.25rem .5rem #fffc}.camera-click-icon{color:#a3b1c6;transition:color .2s ease}.camera-click-button:hover .camera-click-icon{color:#8ba3c4}.camera-click-button.active .camera-click-icon{color:#4caf50}@media (pointer: coarse){.camera-click-button:hover:not(:active):not(.active),.camera-click-button:hover{transform:none}.camera-click-button:not(.active):active{transform:translateY(-.125rem)}.camera-click-button:active{transition:all .05s ease}.camera-click-button:hover .camera-click-icon{color:#a3b1c6}.camera-click-button:not(.active):active .camera-click-icon{color:#8ba3c4}}.footer{display:flex;align-items:center;justify-content:center;gap:clamp(2.5rem,10vw,4.5rem);padding:clamp(.5rem,1.5vw,.75rem) clamp(1.25rem,3.5vw,1.75rem);padding-bottom:clamp(2rem,5vh,3.5rem);background-color:#e8ecf2;flex-shrink:0;width:100%;margin-top:auto}.waveform-wrapper{width:clamp(8rem,23vw,10rem);height:clamp(8rem,23vw,10rem);display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;z-index:1;transform:translate(0);overflow:visible;box-shadow:none;background-color:transparent;box-sizing:border-box}.upload-button,.start-button{cursor:pointer;transition:all .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:#e8ecf2!important;position:relative;z-index:1}.upload-button:focus:not(:hover),.start-button:focus:not(:hover){outline:none;box-shadow:.1875rem .1875rem .375rem #a3b1c699,-.1875rem -.1875rem .375rem #ffffffe6,inset 0 0 #a3b1c600,inset 0 0 #fff0!important;transform:scale(1)!important}.upload-button:active,.start-button:active{transform:scale(.95);box-shadow:inset .1875rem .1875rem .3125rem #a3b1c680,inset -.1875rem -.1875rem .3125rem #fffc}@media (pointer: coarse){.upload-button:active,.start-button:active{transition:all .05s ease}}.upload-button svg path{fill:#a3b1c6}.upload-button.active svg path{fill:#4caf50}.upload-button.active{box-shadow:inset .25rem .25rem .5rem #a3b1c680,inset -.25rem -.25rem .5rem #fffc}.start-button svg path,.start-button .start-icon path,.start-button svg g path{fill:#a3b1c6!important}.start-button.active svg path,.start-button.active .start-icon path,.start-button.active svg g path{fill:#a3b1c6!important}.start-button.active{box-shadow:inset .25rem .25rem .5rem #a3b1c680,inset -.25rem -.25rem .5rem #fffc}.start-button.should-click{position:relative;animation:greenPulseGlow 2s infinite ease-in-out}.start-button.should-click:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;border:3px solid rgba(76,175,80,.6);z-index:-1;pointer-events:none;animation:greenRingPulse 2s infinite ease-in-out}@keyframes greenPulseGlow{0%,to{box-shadow:.1875rem .1875rem .375rem #a3b1c699,-.1875rem -.1875rem .375rem #ffffffe6,0 0 #4caf5066}50%{box-shadow:.1875rem .1875rem .375rem #a3b1c699,-.1875rem -.1875rem .375rem #ffffffe6,0 0 15px 4px #4caf5099}}.upload-indicator{position:absolute;width:100%;height:.1875rem;bottom:0;left:0;background-color:#4caf50;transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}.uploading .upload-indicator{animation:uploadProgress 1.5s infinite ease-in-out}@keyframes uploadProgress{0%{transform:scaleX(0)}50%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes pulse{0%{box-shadow:0 0 #ff3b30b3}70%{box-shadow:0 0 0 .375rem #ff3b3000}to{box-shadow:0 0 #ff3b3000}}.upload-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#000000bf;color:#fff;padding:clamp(.375rem,1.5vw,.5rem) clamp(.5rem,2vw,.75rem);border-radius:.375rem;font-size:clamp(.625rem,2vw,.75rem);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease;margin-bottom:clamp(.25rem,1.5vw,.5rem);z-index:100;box-sizing:border-box}.upload-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:clamp(-.25rem,-1vw,-.3125rem);border-width:clamp(.25rem,1vw,.3125rem);border-style:solid;border-color:rgba(0,0,0,.75) transparent transparent transparent}.upload-button:hover+.upload-tooltip,.upload-tooltip:hover{opacity:1}.neumorphic-button:hover:not(.start-button){transform:translateY(-.1875rem);transition:transform .2s ease}.upload-icon{width:clamp(1.25rem,3vw,1.5rem);height:clamp(1.25rem,3vw,1.5rem)}.upload-button svg{width:clamp(1.25rem,3.5vw,1.5rem);height:clamp(1.25rem,3.5vw,1.5rem)}.start-button-glow{position:absolute;top:50%;left:50%;width:clamp(3rem,13vw,3.5rem);height:clamp(3rem,13vw,3.5rem);border-radius:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;background:radial-gradient(circle at center,#2e7d32e6,#2e7d32cc 25%,#2e7d3280 40%,#2e7d3233,#2e7d3200 80%);box-shadow:0 0 clamp(.5rem,2vw,.75rem) #2e7d32e6,0 0 clamp(1rem,3vw,1.25rem) #2e7d32b3,0 0 clamp(1.5rem,4vw,2rem) #2e7d3266;animation:greenGlowPulse .8s infinite}@keyframes greenGlowPulse{0%,to{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}.voice-waveform{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;box-shadow:none;overflow:visible;background-color:transparent;aspect-ratio:1/1;box-sizing:border-box}.voice-waveform .canvas-container{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;overflow:visible;transform-origin:center;pointer-events:none;backface-visibility:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.waveform-canvas{display:block;width:100%;height:100%;background-color:transparent;border-radius:0;transform-origin:center;overflow:visible;z-index:5;pointer-events:none;box-sizing:border-box}.waveform-center-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:auto}.connecting-indicator{position:absolute;bottom:clamp(-1rem,-4vw,-1.5rem);left:50%;transform:translate(-50%);display:flex;justify-content:center;gap:clamp(.125rem,1vw,.25rem);width:auto}.connecting-indicator .dot{width:clamp(.25rem,1.5vw,.375rem);height:clamp(.25rem,1.5vw,.375rem);background-color:#909cb3;border-radius:50%;animation:pulse 1.4s infinite ease-in-out;box-sizing:border-box}.connecting-indicator .dot:nth-child(1){animation-delay:0s}.connecting-indicator .dot:nth-child(2){animation-delay:.2s}.connecting-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{transform:scale(.6);opacity:.6}50%{transform:scale(1);opacity:1}}.projection-screen-container{width:100%;height:100%;position:relative;overflow:hidden;margin:0 auto;box-shadow:.625rem .625rem 1.25rem #a3b1c6b3,-.625rem -.625rem 1.25rem #ffffffe6;border-radius:1rem;display:flex;flex-direction:column;box-sizing:border-box}.projection-screen{width:100%;height:100%;background-color:#dde3ed;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-radius:1rem;transition:all .3s ease;box-shadow:0 .5rem .9375rem -.3125rem #00000026;padding:clamp(.125rem,.5vw,.25rem);box-sizing:border-box}.projection-screen:has(.camera-container.fullview){padding:0}.image-container{position:relative;transition:all .3s ease-in-out;border-radius:.75rem;cursor:pointer;box-sizing:border-box}.image-container.fullview{width:98%;height:98%;z-index:5;cursor:default;max-width:100%;max-height:100%}.image-container.minimized{position:absolute;width:clamp(3rem,12vw,4.5rem);height:clamp(2rem,8vw,3rem);bottom:clamp(.25rem,1vw,.5rem);left:clamp(.25rem,1vw,.5rem);z-index:10;border:.1875rem solid #fff;box-shadow:0 .25rem .5rem #0003;cursor:pointer;transition:transform .2s ease;aspect-ratio:3 / 2;border-radius:.25rem}.image-container.minimized:hover{transform:scale(1.05)}.projection-image{width:100%;height:100%;object-fit:contain;display:block;border-radius:.75rem;overflow:hidden;transition:opacity .5s ease,transform .5s ease,box-shadow .5s ease;box-shadow:0 .25rem .9375rem #00000014;opacity:.95}.projection-image.loaded{opacity:1;transform:translateY(0)}.projection-image.fade-in{animation:fadeIn .5s ease-in-out forwards}@keyframes fadeIn{0%{opacity:.7;transform:translateY(.625rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.camera-fullview{width:98%;height:98%;z-index:5}.projection-content{width:100%;height:100%;padding:clamp(.125rem,1vw,.25rem);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.placeholder-text{color:#999;text-align:center;font-style:italic;padding:clamp(.75rem,3vw,1.25rem)}.loading-spinner{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner{width:clamp(2rem,5vw,2.5rem);height:clamp(2rem,5vw,2.5rem);border:.25rem solid rgba(0,0,0,.1);border-left-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}.camera-container{width:100%;height:100%;position:relative;overflow:visible;border-radius:1rem;transition:all .3s ease-in-out;background-color:#dde3ed;cursor:pointer;box-sizing:border-box}.camera-container.fullview{width:100%;height:100%;border-radius:1rem;box-shadow:.625rem .625rem 1.25rem #a3b1c6b3,-.625rem -.625rem 1.25rem #ffffffe6}.camera-container.minimized{position:absolute;width:clamp(3rem,12vw,4.5rem);height:clamp(2rem,8vw,3rem);bottom:clamp(.25rem,1vw,.5rem);left:clamp(.25rem,1vw,.5rem);z-index:10;border:.1875rem solid #fff;box-shadow:0 .25rem .5rem #0003;transition:all .3s ease;aspect-ratio:3 / 2;border-radius:.25rem}.camera-container.minimized:hover{transform:scale(1.05)}.camera-container video{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;overflow:hidden}.camera-paused-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden;z-index:2}.camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.camera-indicator{position:absolute;top:.5rem;right:.5rem;width:1.33rem;height:1.33rem;background-color:#ff3b30;border-radius:50%;animation:pulse 1.5s infinite;z-index:10;box-sizing:border-box}.camera-container.fullview .camera-indicator{top:clamp(.5rem,2vw,1rem);right:clamp(.5rem,2vw,1rem);width:clamp(1rem,3.3vw,1.33rem);height:clamp(1rem,3.3vw,1.33rem)}.camera-container.minimized .camera-indicator{top:clamp(.125rem,1vw,.25rem);right:clamp(.125rem,1vw,.25rem);width:clamp(.33rem,2vw,.67rem);height:clamp(.33rem,2vw,.67rem)}.camera-controls{position:absolute;bottom:clamp(.5rem,2vw,1rem);left:0;width:100%;padding:0 clamp(.5rem,2vw,1rem);display:flex;justify-content:center;pointer-events:auto;z-index:15;box-sizing:border-box}.camera-select{background-color:#fffc;border:none;border-radius:1.25rem;padding:clamp(.375rem,1.5vw,.5rem) clamp(.75rem,3vw,1rem);font-size:clamp(.75rem,2vw,.875rem);color:#333;outline:none;max-width:80%;-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem);box-shadow:0 .125rem .3125rem #0003;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.camera-select:hover{background-color:#ffffffe6}@keyframes pulse{0%{box-shadow:0 0 #ff3b30cc;transform:scale(1)}50%{box-shadow:0 0 0 .5rem #ff3b3033;transform:scale(1.1)}to{box-shadow:0 0 0 .75rem #ff3b3000;transform:scale(1)}}.camera-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#dde3edcc;z-index:5;box-sizing:border-box}.camera-spinner{width:clamp(1.5rem,4vw,1.875rem);height:clamp(1.5rem,4vw,1.875rem);border:.1875rem solid rgba(0,0,0,.1);border-left-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}.camera-error{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#dde3ede6;color:#ff3b30;font-size:clamp(.75rem,2vw,.875rem);font-weight:700;text-align:center;padding:clamp(.5rem,2vw,.625rem);z-index:5;box-sizing:border-box}@keyframes spin{to{transform:rotate(360deg)}}.coordinate-highlighter{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:visible}.coordinate-point{position:absolute;pointer-events:none;transform:translate(-50%,-50%);animation:pointAppear .8s cubic-bezier(.25,.8,.25,1)}.point-dot{width:34px;height:34px;background-color:transparent;border:2.1px solid rgba(255,255,255,.95);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 8px #fff9,0 0 16px #ffffff4d,0 0 24px #ffffff26,inset 0 0 2px #ffffff4d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;will-change:transform;backface-visibility:hidden}@keyframes pointAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);box-shadow:0 0 12px #fffc,0 0 20px #fff6,0 0 30px #fff3}60%{transform:translate(-50%,-50%) scale(1.05)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes ringPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.3}}@media (max-width: 768px){.point-dot{width:28px;height:28px;border-width:2.1px;box-shadow:0 0 6px #fff9,0 0 12px #ffffff4d,0 0 18px #ffffff26,inset 0 0 2px #ffffff4d}}.play-button{cursor:pointer;transition:all .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:#e8ecf2!important;position:relative;z-index:2;border:none;outline:none;display:flex;align-items:center;justify-content:center}.play-button:focus:not(:hover){outline:none;box-shadow:none;transform:scale(1)!important}.play-button:hover:not(:active):not(.active){background-color:#e0e4ea!important;transform:scale(.98);box-shadow:inset .125rem .125rem .25rem #a3b1c666,inset -.125rem -.125rem .25rem #ffffffb3}.play-button:active{transform:scale(.95)}.play-button.active{box-shadow:inset .25rem .25rem .5rem #a3b1c680,inset -.25rem -.25rem .5rem #fffc}.play-button svg path,.play-button .start-icon path,.play-button svg g path{fill:#a3b1c6!important}.play-button.active svg path,.play-button.active .start-icon path,.play-button.active svg g path{fill:#a3b1c6!important}.start-icon{width:clamp(1.75rem,4.5vw,2rem);height:clamp(1.75rem,4.5vw,2rem)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (pointer: coarse){.play-button:active{transition:all .05s ease}.play-button:hover:not(:active):not(.active){background-color:#e8ecf2!important;transform:none}}.play-button.should-click{position:relative;animation:greenPulseGlow 2s infinite ease-in-out}.play-button.should-click:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;border:3px solid rgba(76,175,80,.6);z-index:-1;pointer-events:none;animation:greenRingPulse 2s infinite ease-in-out}@keyframes greenPulseGlow{0%,to{box-shadow:0 0 #4caf5066}50%{box-shadow:0 0 15px 4px #4caf5099}}@keyframes greenRingPulse{0%,to{opacity:.6;transform:scale(1);border-color:#4caf5099}50%{opacity:1;transform:scale(1.05);border-color:#4caf50e6}}.image-billboard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:1rem;opacity:0;transition:opacity .3s ease}.image-billboard-overlay.visible{opacity:1}.image-billboard{background-color:#e8ecf2;border-radius:1.5rem;box-shadow:.625rem .625rem 1.25rem #a3b1c6b3,-.625rem -.625rem 1.25rem #ffffffe6;max-width:90vw;max-height:85vh;width:100%;max-width:500px;display:flex;flex-direction:column;overflow:hidden;transform:translateY(-100%);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.image-billboard.slide-down{transform:translateY(0)}.billboard-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background-color:#e8ecf2;border-bottom:1px solid rgba(163,177,198,.3)}.billboard-title{font-size:1.1rem;font-weight:600;color:#2c3e50;text-shadow:0 1px 2px rgba(255,255,255,.8);flex:1}.billboard-close-btn{background:#e8ecf2;border:none;border-radius:50%;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;color:#666;cursor:pointer;transition:all .2s ease;box-shadow:.1875rem .1875rem .375rem #a3b1c699,-.1875rem -.1875rem .375rem #fffc;padding:0;margin:0}.billboard-close-btn svg{flex-shrink:0}.billboard-close-btn:hover{color:#333;box-shadow:.125rem .125rem .25rem #a3b1c6cc,-.125rem -.125rem .25rem #ffffffe6}.billboard-close-btn:active{box-shadow:inset .125rem .125rem .25rem #a3b1c699,inset -.125rem -.125rem .25rem #fffc}.billboard-content{flex:1;display:flex;align-items:center;justify-content:center;padding:.7rem;background-color:#dde3ed;min-height:200px;position:relative}.billboard-loading{color:#666;font-size:1rem;text-align:center;padding:2rem}.billboard-image{max-width:100%;width:100%;height:auto;object-fit:contain;border-radius:.75rem;box-shadow:.3125rem .3125rem .625rem #a3b1c699,-.3125rem -.3125rem .625rem #fffc;transition:transform .2s ease}.billboard-image:hover{transform:scale(1.02)}@media (max-width: 768px){.image-billboard-overlay{padding:.5rem}.image-billboard{max-width:95vw;max-height:90vh;border-radius:1rem}.billboard-header{padding:.75rem 1rem}.billboard-title{font-size:1rem}.billboard-close-btn{width:1.75rem;height:1.75rem;font-size:1.25rem}.billboard-content{padding:.1rem}.billboard-image{border-radius:.5rem}}@media (max-width: 480px){.image-billboard{max-width:98vw;max-height:95vh}}:root{--background: #e8ecf2;--button-bg: #e8ecf2;--shadow-dark: rgba(163, 177, 198, .6);--shadow-light: rgba(255, 255, 255, .8);--icon-inactive: #a3b1c6;--icon-active: #3498db;--icon-microphone: #3498db;--icon-star: #ffa500;--icon-heart: #ff69b4;--transition-speed: .3s}.neumorphic-button{display:flex;align-items:center;justify-content:center;border:none;background-color:var(--button-bg);color:var(--icon-inactive);cursor:pointer;transition:all .3s ease;position:relative;box-shadow:.5rem .5rem .9375rem var(--shadow-dark),-.5rem -.5rem .9375rem var(--shadow-light);overflow:hidden;padding:0;outline:none;z-index:10}.neumorphic-button.active{box-shadow:inset .3125rem .3125rem .625rem var(--shadow-dark),inset -.3125rem -.3125rem .625rem var(--shadow-light);color:var(--icon-active)}.neumorphic-button:not(.disabled):not(.active):hover{box-shadow:inset .3125rem .3125rem .625rem var(--shadow-dark),inset -.3125rem -.3125rem .625rem var(--shadow-light);transform:scale(.98)}.neumorphic-button:not(.disabled):active{transform:translateY(.125rem) scale(.95);box-shadow:inset .3125rem .3125rem .625rem var(--shadow-dark),inset -.3125rem -.3125rem .625rem var(--shadow-light);transition:all .1s ease}@media (pointer: coarse){.neumorphic-button:not(.disabled):not(.active):hover{box-shadow:.5rem .5rem .9375rem var(--shadow-dark),-.5rem -.5rem .9375rem var(--shadow-light);transform:none}.neumorphic-button:not(.disabled):active{transform:none;transition:all .05s ease;box-shadow:.5rem .5rem .9375rem var(--shadow-dark),-.5rem -.5rem .9375rem var(--shadow-light)}.neumorphic-button:not(.disabled):not(.active):active{box-shadow:inset .3125rem .3125rem .625rem var(--shadow-dark),inset -.3125rem -.3125rem .625rem var(--shadow-light);transform:scale(.98);transition:all .05s ease}.neumorphic-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}}.neumorphic-button.disabled{opacity:.6;cursor:not-allowed}.button-icon{display:flex;align-items:center;justify-content:center;width:80%;height:80%;font-size:1.25rem;color:var(--icon-inactive)}.neumorphic-button svg path{fill:var(--icon-inactive)}.neumorphic-button.active svg path{fill:var(--icon-active)}.neumorphic-button .fa-microphone,.neumorphic-button svg.microphone-icon{color:var(--icon-microphone);font-size:1.8rem}.neumorphic-button .fa-heart,.neumorphic-button svg.heart-icon{color:var(--icon-heart)}.neumorphic-button .fa-star,.neumorphic-button svg.star-icon{color:var(--icon-star)}.button-label{margin-left:.5rem;font-size:.875rem;font-weight:500}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{line-height:1.5;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#f4f4f4;color:#333}#root{display:flex;flex-direction:column;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:focus-visible{outline:.125rem solid blue;outline-offset:.125rem}