:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}h1{font-size:3.2em;line-height:1.1;color:#1f2937;margin:0 0 8px}h2{color:#1f2937;margin:0 0 16px;font-size:20px;font-weight:600;flex-shrink:0}.card{padding:2em}#app{width:100vw;height:100vh;margin:0;padding:0;text-align:center}main{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.container{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:40px;width:calc(90vw - 60px);max-width:calc(90vw - 60px);height:calc(90vh - 50px);max-height:calc(90vw - 50px);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}header{text-align:center;margin-bottom:24px;flex-shrink:0}.subtitle{color:#6b7280;margin:0;font-size:14px}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:stretch;height:100%;align-content:stretch}.preview-panel{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}.controls-panel{display:flex;flex-direction:column;grid-template-rows:minmax(0,1fr) minmax(0,auto) minmax(0,auto);gap:16px;min-width:0;min-height:0;height:100%;overflow:hidden;align-content:stretch}.controls-panel>*{min-height:0;max-height:100%}.input-options{display:flex;flex-direction:column;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:16px;height:100%;min-height:0;max-height:100%}.input-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;height:100%;border:2px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;color:#374151;font-weight:500;transition:border-color .2s;font-family:inherit}.input-option:hover{border-color:#d1d5db}.input-option .icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#6b7280}.input-option .label{text-align:center}.preview-video{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#000;display:block}.camera-controls{display:flex;gap:12px;justify-content:center;flex-shrink:0;min-height:0;max-height:100%}.preview-container{text-align:center;margin-bottom:0;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0;position:relative;max-height:100%}.preview-container img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;background:#f3f4f6;object-fit:contain}.preview-placeholder{width:100%;height:100%;border-radius:8px;background:#f3f4f6;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:14px}.instruction{color:#6b7280;font-size:14px;margin:0 0 16px}button{border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s;font-family:inherit}.btn-primary{background-color:#2563eb;color:#fff;padding:10px 24px}.btn-primary:hover{background-color:#1d4ed8}.btn-primary:disabled{background-color:#9ca3af;cursor:not-allowed}.btn-secondary{background-color:#e5e7eb;color:#374151;padding:10px 24px}.btn-secondary:hover{background-color:#d1d5db}.step-controls{display:flex;gap:12px;justify-content:center;flex-shrink:0;min-height:0;max-height:100%}.error-message{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background-color:#fee2e2;color:#991b1b;padding:12px 16px;border-radius:6px;font-size:14px;border-left:4px solid #dc2626;box-shadow:0 6px 16px #00000026;z-index:1000;pointer-events:none;max-width:95vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:768px){main{padding:10px;height:100vh}.container{padding:20px;width:calc(95vw - 40px);max-width:calc(95vw - 40px);height:calc(95vh - 40px);max-height:calc(95vh - 40px)}h1{font-size:24px;margin-bottom:4px}header{margin-bottom:16px}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);height:100%}.input-options{flex-direction:row;height:50%}.camera-controls,.step-controls{flex-direction:column}button{width:100%}}@media(min-width:1024px){.container{max-height:900px}}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0}