:root{--circle: clamp(180px, 60vmin, 320px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:#0b0b0f}body{font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif}#app{width:100%}.screen{min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;color:#fff;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.stage{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%}.circle-wrap{position:relative;width:var(--circle);height:var(--circle);flex-shrink:0}.circle-btn{width:100%;height:100%;border-radius:50%;border:none;background:#007aff;color:#fff;font-size:clamp(16px,4.2vmin,20px);font-weight:600;line-height:1.3;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;-webkit-user-select:none;user-select:none;box-shadow:0 10px 28px #007aff66;transition:transform .15s ease}.circle-btn:active{transform:scale(.96)}.circle-btn:disabled{opacity:.6;cursor:default}.circle-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#000;cursor:pointer}.mirrored{transform:scaleX(-1)}.play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:64px;height:64px;border-radius:50%;border:none;background:#00000073;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s ease}.play-overlay svg{width:28px;height:28px}.play-overlay.is-playing{opacity:.45}.upload-ring{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:80px;height:80px;pointer-events:none;animation:upload-ring-spin 1.2s linear infinite;transform-origin:50% 50%}.upload-ring-bg{fill:none;stroke:#ffffff2e;stroke-width:4}.upload-ring-progress{fill:none;stroke:#555;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .15s linear}@keyframes upload-ring-spin{to{transform:rotate(360deg)}}.rec-dot{position:absolute;top:16px;left:16px;width:12px;height:12px;border-radius:50%;background:#ff2d55;animation:pulse 1.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #ff2d5599}70%{box-shadow:0 0 0 10px #ff2d5500}to{box-shadow:0 0 #ff2d5500}}.timer{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#00000073;padding:4px 12px;border-radius:12px;font-size:13px;letter-spacing:.5px;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;gap:36px}.ctrl-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:transform .15s ease}.ctrl-btn:active{transform:scale(.92)}.ctrl-cancel{background:#3a3a42}.ctrl-ok{background:#34c759}.ctrl-btn svg{width:24px;height:24px}.status{margin:0;min-height:18px;font-size:14px;color:#ff8a8a;text-align:center;max-width:320px}.hidden{display:none!important}.result-screen{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.text-btn{background:transparent;border:1px solid #555;color:#fff;padding:10px 20px;border-radius:24px;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}.text-btn:active{background:#ffffff14}.result-actions{display:flex;align-items:center;gap:16px}.locked-screen{display:flex;align-items:center;justify-content:center;width:100%;padding:24px 16px;text-align:center}.locked-text{margin:0;max-width:320px;font-size:clamp(15px,4.2vmin,19px);line-height:1.5;color:#fff}.text-btn:disabled{cursor:default;opacity:.7}#sendBtn.is-sending{animation:pulse-send 1s infinite}#sendBtn.is-sent{background:#34c7592e;border-color:#34c759}@keyframes pulse-send{0%,to{opacity:.7}50%{opacity:1}}.toast{position:fixed;left:50%;top:max(24px,env(safe-area-inset-top));transform:translate(-50%);max-width:calc(100vw - 32px);background:#000000d9;color:#ff8a8a;padding:10px 18px;border-radius:24px;font-size:14px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:10}.toast.visible{opacity:1}
