*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,sans-serif;background:#0f1117;color:#e8eaed}#root{min-height:100vh}.app{max-width:1120px;margin:0 auto;padding:16px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:stretch}header{text-align:center}header h1{margin:0 0 8px;font-size:1.6rem}header p{margin:0;color:#9aa0a6}.stage{position:relative;margin:16px auto 0;width:100%;max-width:560px;height:min(42vh,360px);min-height:200px;border-radius:12px;overflow:hidden;background:#0b0d12;border:1px solid #2d3142;display:flex;align-items:center;justify-content:center}.video-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.preview-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#0b0d12}.panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.panel.three{grid-template-columns:1fr 1fr 1fr}.card{background:#1a1d27;border:1px solid #2d3142;border-radius:12px;padding:16px}.card h2{margin:0 0 12px;font-size:1rem}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.95rem}.transcripts{max-height:220px;overflow-y:auto;font-size:.95rem}.transcripts p{margin:0 0 8px;color:#7ee8d7}.controls{display:flex;gap:12px;margin-top:16px;align-items:center;justify-content:center}button{border:none;border-radius:8px;padding:12px 18px;font-size:.95rem;cursor:pointer;background:#4c6ef5;color:#fff;min-height:44px;touch-action:manipulation}button.secondary{background:#343a50}button:disabled{opacity:.5;cursor:not-allowed}.status{margin-top:12px;color:#9aa0a6;font-size:.9rem}.error{color:#ff8b8b}.warn{color:#ffd43b}.focus-hero{margin:16px auto 0;width:100%;max-width:560px;padding:16px;border-radius:16px;background:#1a1d27;border:1px solid #2d3142;text-align:center}.focus-hero.focus-on{border-color:#37b24d;box-shadow:0 0 0 1px #37b24d33}.focus-hero.focus-off{border-color:#f59f00;box-shadow:0 0 0 1px #f59f0033}.focus-percent{font-size:3rem;font-weight:700;line-height:1;color:#74c0fc}.focus-label{margin-top:8px;color:#9aa0a6}.focus-bar{margin:16px auto 0;max-width:480px;height:12px;background:#2d3142;border-radius:999px;overflow:hidden}.focus-fill{height:100%;background:linear-gradient(90deg,#4c6ef5,#51cf66);transition:width .3s ease}.focus-times{display:flex;justify-content:center;gap:20px;margin-top:12px;font-size:.95rem;color:#ced4da}.focus-state{font-weight:600;color:#fff}.status.info{color:#69db7c}@media(min-width:900px){.stage{max-width:640px;height:min(40vh,400px)}.focus-hero{max-width:640px}.focus-percent{font-size:3rem}}@media(max-width:1000px){.panel,.panel.three{grid-template-columns:1fr}.stage{height:min(38vh,320px)}}