html,body{height:100%;overflow:hidden}body{box-sizing:border-box;color:#3d3d3d;--mdc-theme-primary:#007f8b;--mdc-theme-on-primary:#f1f3f4;margin:0;padding:1.25em 2em;font-family:helvetica,arial,sans-serif}h1{color:#007f8b;font-style:italic}h2{clear:both}video{clear:both;display:block;transform:rotateY(180deg)}main{flex-direction:column;height:100%;display:flex;overflow:hidden}#demos{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}section{opacity:1;transition:opacity .5s ease-in-out}.tab-row{gap:.75rem;margin:.75rem 0 1rem;display:flex}.tab-button{color:#007f8b;cursor:pointer;background:#fff;border:1px solid #007f8b;border-radius:999px;padding:.45rem .9rem;font-weight:700}.tab-button.active{color:#f1f3f4;background:#007f8b}.invisible{opacity:.2}.videoView,.detectOnClick,.blend-shapes{float:left;width:48%;margin:2% 1%;position:relative}.detectOnClick{cursor:pointer;z-index:0}.detectOnClick img{width:100%;display:block}.videoWrapper{position:relative}.canvas{pointer-events:none;z-index:1;position:absolute;top:0;left:0}.output_canvas{position:absolute;top:0;left:0;transform:rotateY(180deg)}.blend-shapes-item{align-items:center;height:20px;margin-bottom:6px;display:flex}.blend-shapes-label{flex-shrink:0;justify-content:flex-end;align-items:center;width:120px;margin-right:4px;font-size:12px;display:flex}.blend-shapes-value{color:#fff;background-color:#007f8b;align-items:center;min-width:40px;height:16px;padding-left:4px;font-size:12px;display:flex}.blend-shapes-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.blend-shapes-column{margin:0;padding:0;list-style:none}.carousel{align-items:center;gap:.5rem;margin:1rem 0 .25rem;display:flex}.carousel-slot{cursor:pointer;flex:none;position:relative}.carousel-slot img{object-fit:cover;width:480px;height:480px;display:block}.image-loading-overlay{color:#f5fbfd;pointer-events:none;z-index:2;background:#08101673;flex-direction:column;justify-content:center;align-items:center;gap:.55rem;font-size:.92rem;display:flex;position:absolute;inset:0}.image-loading-spinner{border:3px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:2rem;height:2rem;animation:.75s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.carousel-nav{color:#fff;cursor:pointer;background:#007f8b;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.4rem;height:2.4rem;font-size:1.6rem;line-height:1;transition:background .15s;display:flex}.carousel-nav:hover{background:#005f6b}.carousel-counter{text-align:center;color:#666;width:calc(480px + 5.8rem);margin:.25rem 0 .5rem;font-size:.85rem}.image-detector-layout{flex:1;align-items:stretch;gap:1.5rem;min-height:0;display:flex;overflow:hidden}.image-col{flex-direction:column;flex-shrink:0;display:flex}.blend-shapes-panel{border-left:2px solid #d0e8ea;flex:1;min-height:0;padding-left:1.25rem;overflow-y:auto}.blend-shapes-panel .blend-shapes{float:none;width:auto;margin:0}.video-shell{margin-top:.75rem}@media (width<=900px){.carousel-slot img{width:100%;height:auto}.carousel-counter{width:100%}.tab-row{flex-wrap:wrap}.videoView,.detectOnClick,.blend-shapes{float:none;width:100%;margin:1.2rem 0}}.auto-detector{flex-direction:column;flex:1;gap:1.5rem;min-height:0;padding-right:.5rem;display:flex;overflow-y:auto}.auto-controls{flex-wrap:wrap;align-items:center;gap:1.25rem;display:flex}.auto-run-status{color:#456;margin:-.8rem 0 0;font-size:.9rem}.auto-run-status.running{color:#007f8b;font-weight:600}.auto-threshold-label{color:#3d3d3d;align-items:center;gap:.6rem;font-weight:600;display:flex}.auto-threshold-input{color:#3d3d3d;border:1px solid #007f8b;border-radius:6px;outline:none;width:5.5rem;padding:.35rem .6rem;font-size:1rem}.auto-threshold-input:focus{box-shadow:0 0 0 2px #007f8b4d}.auto-threshold-input:disabled{background:#f0f0f0;border-color:#aaa}.auto-start-button{color:#f1f3f4;cursor:pointer;background:#007f8b;border:none;border-radius:999px;padding:.45rem 1.4rem;font-size:1rem;font-weight:700;transition:background .15s}.auto-start-button:hover:not(:disabled){background:#005f6b}.auto-start-button:disabled{cursor:not-allowed;background:#aaa}.auto-report h2{color:#007f8b;margin:0 0 .75rem}.report-stats{flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;display:flex}.stat-card{background:#f7fdfd;border:2px solid #d0e8ea;border-radius:10px;flex-direction:column;align-items:center;min-width:7rem;padding:.75rem 1.25rem;display:flex}.stat-card.stat-face{background:#f1faf1;border-color:#4caf50}.stat-card.stat-no-face{background:#fdf5f5;border-color:#e57373}.stat-card.stat-multiple-face{background:#fff8ec;border-color:#f0ad4e}.stat-value{color:#007f8b;font-size:1.8rem;font-weight:700;line-height:1.1}.stat-face .stat-value{color:#388e3c}.stat-no-face .stat-value{color:#c62828}.stat-multiple-face .stat-value{color:#d9822b}.stat-label{color:#666;text-align:center;margin-top:.25rem;font-size:.78rem}.no-face-section h3{color:#c62828;margin:0 0 .6rem}.multiple-face-section{margin-top:1rem}.multiple-face-section h3{color:#d9822b;margin:0 0 .6rem}.no-face-list{flex-direction:column;gap:.4rem;max-height:16rem;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.no-face-item{background:#fdf5f5;border:1px solid #f5c6c6;border-radius:6px;align-items:center;gap:.75rem;padding:.35rem .5rem;display:flex}.multiple-face-item{background:#fff8ec;border:1px solid #f6d7a7;border-radius:6px;align-items:center;gap:.75rem;padding:.35rem .5rem;display:flex}.no-face-name{color:#3d3d3d;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.88rem;overflow:hidden}.view-button{color:#fff;cursor:pointer;background:#007f8b;border:none;border-radius:999px;flex-shrink:0;padding:.2rem .75rem;font-size:.8rem;font-weight:600;transition:background .15s}.view-button:hover{background:#005f6b}.preview-overlay{z-index:100;background:#000000b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.preview-modal{background:#fff;border-radius:10px;flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;padding:1rem;display:flex;position:relative}.preview-close{cursor:pointer;color:#555;background:0 0;border:none;font-size:1.2rem;line-height:1;position:absolute;top:.5rem;right:.6rem}.preview-close:hover{color:#000}.preview-img{object-fit:contain;border-radius:6px;max-width:80vw;max-height:80vh;margin-top:.5rem}