html{font-size:100%}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{margin:0;padding:0}@font-face{font-family:SpaceGrotesk-Regular;src:url(../fonts/SpaceGrotesk-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SpaceGrotesk-Medium;src:url(../fonts/SpaceGrotesk-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}:root{--color-black:#000;--color-white:#fff;--color-gray-light:#c0c9cf;--color-gray-dark:#2a3038;--color-gray-darker:#4e545c;--color-gray-darkest:#5a6068;--color-background:#c0c9cf;--control-bg:#24282b;--control-border:rgba(122,122,128,0.36);--control-text:#eff0f3;--control-text-secondary:rgba(239,240,243,0.9);--guide-border:rgba(159,166,178,0.4);--overlay-bg:rgba(42,48,56,0.95);--border-subtle:hsla(0,0%,100%,0.1);--border-ring:hsla(0,0%,100%,0.3);--shadow-dark:rgba(0,0,0,0.3);--control-shadow:0px 2px 2px 0px rgba(28,29,37,0.02),0px -1px 4px 0px rgba(28,29,37,0.06);--guide-shadow:0px 2px 20px 0px rgba(24,28,41,0.25);--font-regular:"SpaceGrotesk-Regular",sans-serif;--font-medium:"SpaceGrotesk-Medium",sans-serif;--font-system:system-ui,sans-serif;--spacing-xs:6px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:40px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--button-size:36px;--button-height:40px;--loader-size:160px;--icon-size:20px}html{box-sizing:border-box;overflow-x:hidden;width:100%;height:100vh}*,:after,:before{box-sizing:inherit}body{font-family:var(--font-regular);color:var(--color-white);background:var(--color-black);margin:0;padding:0;line-height:1.2;width:100%;height:100vh;overflow:hidden}.app-container{width:100vw;height:100vh;padding:24px;background:var(--color-background);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg)}.app-header{text-align:center}.app-header h1{font-size:24px;font-weight:500;line-height:1.3;color:#121519;margin:0;font-family:var(--font-regular)}@media (max-width:809px){.app-header h1{font-family:var(--font-medium)}}.viewer-container{position:relative;width:100%;height:100%;max-width:1096px;max-height:720px}@media (max-width:1144px){.viewer-container{max-width:calc(100vw - 48px)}}@media (max-height:816px){.viewer-container{max-height:calc(100vh - 72px - var(--spacing-lg))}}.viewer-wrapper{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:var(--color-background)}.corner-bracket{position:absolute;width:64px;height:64px;border:0 solid var(--color-black);z-index:1002;pointer-events:none}.corner-bracket.top-left{top:-2px;left:-2px;border-top-width:2px;border-left-width:2px;border-top-left-radius:20px}.corner-bracket.top-right{top:-2px;right:-2px;border-top-width:2px;border-right-width:2px;border-top-right-radius:20px}.corner-bracket.bottom-left{bottom:-2px;left:-2px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:20px}.corner-bracket.bottom-right{bottom:-2px;right:-2px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:20px}.viewer-wrapper:has(#fallbackVideo)~.corner-bracket{display:none}#canvas{display:block;z-index:1;cursor:pointer;border:none}#canvas,#loadingOverlay{background:var(--color-background);width:100%;height:100%;position:absolute;top:0;left:0;outline:none}#loadingOverlay{background-size:cover;background-position:50%;background-repeat:no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity var(--transition-normal);border-radius:19px;border:none}#loadingOverlay.hidden{opacity:0;pointer-events:none}.loader-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.loader-circle,.loader-wrapper{width:var(--loader-size);height:var(--loader-size)}.loader-circle{position:absolute;border-radius:50%;border:2px solid hsla(0,0%,100%,.2);border-top:1px solid var(--color-white);animation:spin 1s linear infinite}.loader-progress{font-size:40px;font-weight:400;line-height:1.276;letter-spacing:.05em;text-transform:uppercase;text-align:center;color:var(--color-white);z-index:1}@keyframes spin{to{transform:rotate(1turn)}}.reset-view-btn{font-family:var(--font-regular)!important;position:absolute;top:var(--spacing-md);right:var(--spacing-md);z-index:800;background:var(--control-bg);color:var(--control-text);border:.5px solid var(--control-border);border-radius:var(--radius-xs);padding:var(--spacing-sm);height:var(--button-height);font-size:14px;font-weight:500;line-height:1.143;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--control-shadow);opacity:0;pointer-events:none;white-space:nowrap}.reset-view-btn.visible{opacity:1;pointer-events:auto}.reset-view-btn svg{flex-shrink:0;width:var(--icon-size);height:var(--icon-size)}.reset-view-btn:hover{background:var(--control-bg);opacity:.9}.reset-view-btn:active{transform:scale(.98)}#zoomControls{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);z-index:800;background:var(--control-bg);border:.5px solid var(--control-border);border-radius:var(--radius-xs);padding:var(--spacing-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);width:var(--button-size);opacity:0;pointer-events:none;transition:opacity var(--transition-normal);box-shadow:var(--control-shadow)}#zoomControls.visible{opacity:1;pointer-events:auto}#zoomControls button{width:20px;height:20px;background:transparent;color:var(--color-white);border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}#zoomControls button img{width:20px;height:20px;display:block}#zoomControls button:hover{opacity:.8}#zoomControls button:active{transform:scale(.9)}#zoomControls .zoom-separator{width:20px;height:1px;background:var(--control-border);flex-shrink:0}.mute-btn{position:absolute;bottom:var(--spacing-md);left:var(--spacing-md);z-index:800;width:var(--button-size);height:var(--button-size);background:var(--control-bg);color:var(--color-white);border:.5px solid var(--control-border);border-radius:var(--radius-xs);padding:var(--spacing-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:var(--control-shadow);opacity:0;pointer-events:none}.mute-btn.visible{opacity:1;pointer-events:auto}.mute-btn svg{flex-shrink:0;width:var(--icon-size);height:var(--icon-size)}.mute-btn:hover{opacity:.9}.mute-btn:active{transform:scale(.95)}.mute-btn.muted #volumeIcon{display:none}.mute-btn.muted #mutedIcon{display:block!important}#interactionHint{position:absolute;bottom:var(--spacing-2xl);left:50%;transform:translateX(-50%);z-index:800;padding:9px var(--spacing-sm);background:var(--control-bg);color:var(--control-text-secondary);border:.5px solid var(--guide-border);border-radius:var(--radius-sm);font-size:16px;font-weight:500;line-height:1.1;display:flex;flex-direction:row;align-items:flex-end;gap:4px;transition:opacity var(--transition-normal);opacity:0;pointer-events:none;box-shadow:var(--guide-shadow);white-space:nowrap}#interactionHint.visible{opacity:1}#interactionHint span{line-height:1.1}.mouse-icon{width:36px;height:36px;flex-shrink:0}#fallbackVideo{border:none;outline:none}
/*# sourceMappingURL=style.css.map */