:root{--bg:#0b0b0f;--fg:#f4f4f6;--muted:#f4f4f68c;--accent:#c5f82a;--on-accent:#0b0b0f;--accent-2:#ff5c8a;--glass:#1212188c;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Apple SD Gothic Neo,Pretendard,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0;overflow:hidden}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:0}button:disabled{opacity:.4;cursor:default}#app{position:fixed;inset:0}#stage{touch-action:none;position:absolute;inset:0}.loaded #stage{cursor:grab}.mirrored #video,.mirrored #canvas{transform:scaleX(-1)}.dragging,.dragging *{cursor:grabbing!important}#video,#canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#canvas{opacity:0}#canvas.visible{opacity:1}.prep{top:calc(var(--safe-top) + 14px);background:var(--glass);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none;white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:13px;position:absolute;left:50%;transform:translate(-50%)}.hint{background:var(--glass);-webkit-backdrop-filter:blur(12px);white-space:nowrap;pointer-events:none;border-radius:999px;padding:10px 18px;animation:1.6s ease-in-out infinite nudge;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes nudge{0%,to{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 10px),-50%)}75%{transform:translate(calc(10px - 50%),-50%)}}.empty{text-align:center;background:radial-gradient(60% 50% at 50% 40%, #c5f82a1f, transparent 70%), var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.empty h1{letter-spacing:-.02em;margin:0;font-size:28px}.empty p{color:var(--muted);margin:0}.empty-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 8px;display:flex}.primary,.secondary{border-radius:14px;min-width:140px;padding:14px 22px;font-weight:600}.primary{background:var(--accent);color:var(--on-accent)}.secondary{background:#ffffff1a}.fineprint{opacity:.7;font-size:12px}.mobile-only{display:none}@media (pointer:coarse){.desktop-only{display:none}.mobile-only{display:block}.empty-actions{flex-direction:column;width:min(320px,100%)}.primary,.secondary{width:100%;padding:16px}}.top{padding:calc(var(--safe-top) + 12px) 16px 24px;pointer-events:none;background:linear-gradient(#00000080,#0000);justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;top:0;left:0;right:0}.filename{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px;overflow:hidden}.top-actions{pointer-events:auto;flex-shrink:0;align-items:center;gap:6px;display:flex}.ghost{background:var(--glass);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:8px 14px;font-size:14px}.bottom{padding:28px 16px calc(var(--safe-bottom) + 12px);pointer-events:none;background:linear-gradient(#0000,#0009);position:absolute;bottom:0;left:0;right:0}.timeline,.controls button,.controls .toggle{pointer-events:auto}.timeline{touch-action:none;cursor:pointer;height:28px;position:relative}.track{background:#ffffff2e;border-radius:2px;height:4px;margin-top:-2px;position:absolute;top:50%;left:0;right:0;overflow:hidden}.cached,.played{transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.cached{background:#ffffff40;transition:transform .2s}.played{background:var(--accent)}.handle{background:var(--fg);pointer-events:none;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;box-shadow:0 1px 6px #0006}.controls{align-items:center;gap:12px;display:flex}.icon{background:0 0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.icon svg{fill:currentColor;width:22px;height:22px}.i-pause,.playing .i-play{display:none}.playing .i-pause{display:block}.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:8px;margin-left:auto;font-size:13px;display:flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.switch{background:#fff3;border-radius:999px;width:36px;height:22px;transition:background .2s;position:relative}.switch:after{content:"";background:var(--fg);border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle input:checked+.switch{background:var(--accent)}.toggle input:checked+.switch:after{background:var(--on-accent);transform:translate(14px)}.toggle input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:2px}.menu{top:calc(var(--safe-top) + 56px);-webkit-backdrop-filter:blur(16px);z-index:6;transform-origin:100% 0;background:#202128f5;border-radius:14px;min-width:200px;padding:6px;animation:.14s ease-out menu-in;position:absolute;right:16px;box-shadow:0 10px 30px #00000073}@keyframes menu-in{0%{opacity:0;transform:scale(.96)translateY(-4px)}}.menu [role=menuitem]{text-align:left;background:0 0;border-radius:10px;align-items:center;gap:14px;width:100%;padding:11px 14px;font-size:15px;display:flex}.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:#ffffff14;outline:none}.menu svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}.round{place-items:center;width:36px;height:36px;padding:0;display:grid}.round svg{width:20px;height:20px}.round[aria-expanded=true]{background:#ffffff38}.settings{top:calc(var(--safe-top) + 56px);-webkit-backdrop-filter:blur(16px);z-index:5;background:#181820e0;border-radius:16px;width:min(300px,100vw - 32px);padding:16px;position:absolute;right:16px;box-shadow:0 10px 30px #0006}.setting{flex-direction:column;gap:10px;font-size:14px;display:flex}.setting-label{font-weight:600}.setting-slider{align-items:center;gap:10px;display:flex}.setting-icon{color:var(--muted);flex-shrink:0;display:grid}.setting-icon svg{width:20px;height:20px}.setting input[type=range]{min-width:0;accent-color:var(--accent);flex:1;margin:0}.loading{-webkit-backdrop-filter:blur(8px);background:#0b0b0fbf;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.spinner{border:3px solid #fff3;border-top-color:var(--fg);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{left:50%;bottom:calc(var(--safe-bottom) + 110px);white-space:nowrap;background:#1e1e26eb;border-radius:12px;padding:10px 16px;font-size:14px;position:absolute;transform:translate(-50%)}.drop{border:2px dashed var(--accent);pointer-events:none;background:#c5f82a1f;border-radius:20px;place-items:center;font-size:20px;font-weight:600;display:grid;position:absolute;inset:12px}.recorder{z-index:10;background:#000;position:absolute;inset:0}.recorder-preview{object-fit:cover;width:100%;height:100%}.recorder-preview.mirrored{transform:scaleX(-1)}.recorder-status{top:calc(var(--safe-top) + 16px);background:var(--glass);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;border-radius:999px;padding:6px 14px;font-size:14px;position:absolute;left:50%;transform:translate(-50%)}.recording .recorder-status{color:#ff4d5e}.recorder-bar{padding:24px 24px calc(var(--safe-bottom) + 28px);grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:absolute;bottom:0;left:0;right:0}.recorder-bar .ghost:first-child{justify-self:start}.recorder-bar .ghost:last-child{justify-self:end}.rec-btn{background:0 0;border:4px solid #fff;border-radius:50%;place-items:center;width:72px;height:72px;display:grid}.rec-btn span{background:#ff3b4e;border-radius:50%;width:56px;height:56px;transition:width .2s,height .2s,border-radius .2s}.recording .rec-btn span{border-radius:6px;width:26px;height:26px}