*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}#app{text-align:center;max-width:900px;margin:0 auto;padding:40px 20px}h1{color:#fff;margin-bottom:8px;font-size:2rem}p{color:#aaa;margin-bottom:24px}.upload-area{margin:32px 0}#image-input{display:none}.upload-label{color:#fff;cursor:pointer;background:#e94560;border-radius:8px;padding:16px 32px;font-size:1.1rem;transition:background .2s;display:inline-block}.upload-label:hover{background:#c73e54}.upload-options{justify-content:center;margin-top:16px;display:flex}.checkbox-label{cursor:pointer;color:#aaa;align-items:center;gap:8px;font-size:.9rem;display:inline-flex}.checkbox-label input[type=checkbox]{cursor:pointer;accent-color:#e94560;width:18px;height:18px}.loading{flex-direction:column;align-items:center;gap:12px;margin:32px 0;display:flex}.spinner{border:4px solid #333;border-top-color:#e94560;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.control-area{grid-template-rows:1fr;align-items:start;min-height:180px;margin:24px 0;display:grid}.control-area.hidden{display:none}.control-area>*{grid-area:1/1}.controls{opacity:1;flex-direction:column;align-items:center;gap:16px;transition:opacity .2s;display:flex}.controls.hidden{visibility:hidden;pointer-events:none}.controls .btn-primary{flex-shrink:0}.controls .mic-status{visibility:hidden;min-height:1.2em}.controls .mic-status:not(:empty){visibility:visible}.controls .volume-meter{opacity:0;transition:opacity .3s}.controls.mic-active .volume-meter{opacity:1}.manual-controls{flex-direction:column;align-items:center;gap:12px;margin:24px 0;display:flex}.manual-instruction{color:#e94560;font-size:1rem;font-weight:700}.adjust-controls{opacity:1;flex-direction:column;align-items:center;gap:12px;transition:opacity .2s;display:flex}.adjust-controls.hidden{visibility:hidden;pointer-events:none}.adjust-instruction{color:#0f0;font-size:1rem;font-weight:700}.btn-primary{cursor:pointer;color:#fff;background:#e94560;border:none;border-radius:6px;justify-content:center;align-items:center;min-width:220px;height:48px;padding:12px 24px;font-size:1rem;transition:all .2s;display:inline-flex}.btn-primary:hover{opacity:.9}.btn-primary.active{background:#16213e;border:2px solid #e94560}.btn-secondary{cursor:pointer;color:#fff;background:#444;border:none;border-radius:6px;padding:12px 24px;font-size:1rem;transition:all .2s}.btn-secondary:hover{opacity:.9}.rotation-control{color:#eee;flex-direction:column;align-items:center;gap:8px;display:flex}.rotation-control input[type=range]{width:200px}.zoom-control{color:#eee;flex-direction:column;align-items:center;gap:8px;display:flex}.zoom-control input[type=range]{width:200px}.mic-status{color:#aaa;font-size:.9rem}.volume-meter{background:#333;border-radius:4px;width:200px;height:8px;overflow:hidden}.volume-bar{background:#e94560;width:0%;height:100%;transition:width 50ms linear}.result-area{justify-content:center;margin-top:32px;display:flex}#canvas{cursor:crosshair;border-radius:8px;max-width:100%;max-height:70vh;box-shadow:0 4px 20px #00000080}.instructions{text-align:left;background:#16213e;border-radius:8px;margin-top:48px;padding:24px}.instructions h3{color:#fff;text-align:center;margin-bottom:12px}.instructions ol{color:#aaa;padding-left:20px}.instructions li{margin-bottom:8px}.background-controls{justify-content:center;margin:16px 0;display:flex}.background-controls .btn-secondary{background:#2d6a4f;border:2px solid #00b140;justify-content:center;align-items:center;min-width:200px;height:44px;display:inline-flex}.background-controls .btn-secondary.active{color:#1a1a2e;background:#00b140;font-weight:700}.footer{text-align:center;border-top:1px solid #333;margin-top:48px;padding:24px 20px}.footer-content{max-width:900px;margin:0 auto}.footer-license{color:#888;margin-bottom:8px;font-size:.85rem}.footer-license a{color:#e94560;text-decoration:none}.footer-license a:hover{text-decoration:underline}.footer-libraries{color:#666;font-size:.75rem;line-height:1.6}.footer-libraries a{color:#aaa;text-decoration:none}.footer-libraries a:hover{color:#e94560;text-decoration:underline}.footer-libraries span{color:#888}@media (width<=600px){h1{font-size:1.5rem}.upload-label{padding:14px 24px;font-size:1rem}#canvas{max-height:50vh}.footer-libraries{font-size:.7rem}}