:root{--bg:#f7f6f2;--panel:#fff;--text:#151515;--muted:#6b6b6b;--line:#dedbd2;--accent:#f05a28;--accent-dark:#c9481f;--danger:#1d1d1d;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%}body{min-width:320px;margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;border:0;font-weight:800}button:disabled{cursor:not-allowed;opacity:.5}h1,h2,p{margin-top:0}h1{letter-spacing:-.08em;margin:0 0 12px;font-size:clamp(2.4rem,4vw,4.8rem);font-weight:950;line-height:.86}h2{letter-spacing:-.06em;margin-bottom:24px;font-size:clamp(1.8rem,3vw,3rem);font-weight:950;line-height:.95}.shell{grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:16px;width:100%;height:100dvh;padding:16px;display:grid}.sidebar,.workspace,.panel{background:var(--panel);border:1px solid var(--line);min-height:0}.sidebar{grid-template-rows:1fr auto;gap:16px;padding:24px;display:grid;overflow:hidden}.brand{align-self:start}.brand p,.status-panel p,.action-panel p,.controls p,.processing-grid p,.recorder-grid p,.empty,.recording-card span{color:var(--muted)}.links{color:var(--text);justify-content:flex-end;align-items:center;gap:16px;font-size:.95rem;display:flex}.links a{color:var(--text);text-decoration:none}.eyebrow,.label{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;font-size:.72rem;font-weight:950;display:block}.workspace{grid-auto-rows:max-content;gap:16px;padding:16px;display:grid;overflow:hidden}:is(.workspace:has(.action-panel),.workspace:has(.recorder-grid),.workspace:has(.processing-grid)){grid-template-rows:minmax(0,1fr)}.workspace:has(.controls){grid-template-rows:auto minmax(0,1fr)}.panel{padding:clamp(18px,3vw,32px);overflow:hidden}.status-panel{border-top:1px solid var(--line);gap:18px;padding-top:18px;display:grid}.status-panel strong{overflow-wrap:anywhere;font-size:1.05rem;line-height:1.2;display:block}.status-panel p{overflow-wrap:anywhere;margin-bottom:0}.status-kind{background:var(--text);color:#fff;letter-spacing:.08em;text-transform:uppercase;width:fit-content;padding:6px 10px;font-size:.78rem;font-weight:950;display:inline-flex}.status-kind.error{background:var(--accent-dark)}.meter{background:var(--line);opacity:0;height:8px;overflow:hidden}.meter span{background:var(--accent);height:100%;display:block}.meter.is-active{opacity:1}.action-panel,.controls,.section-heading,.recording-card{justify-content:space-between;align-items:center;gap:20px;display:flex}.action-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:100%;display:flex}.action-panel h2{max-width:560px;margin-bottom:2px}.action-panel p{max-width:620px;margin-bottom:0}.action-panel .primary{min-width:220px}.storage-options{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.storage-options-opfs-only{flex-direction:column;align-items:center}.storage-options .primary,.storage-options .secondary{min-width:240px}.storage-hint{max-width:520px;margin:0;font-size:.95rem}.storage-switch-actions{justify-items:start;display:grid}.controls h2,.section-heading h2,.processing-grid h2,.recorder-grid h2{margin-bottom:28px}.section-heading{margin-bottom:20px}.primary,.secondary,.danger,.corner,.text-button{border:2px solid var(--text);background:var(--panel);min-height:48px;color:var(--text);padding:0 20px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary em{text-overflow:ellipsis;max-width:260px;font-style:normal;font-weight:700;display:block;overflow:hidden}.danger{background:var(--danger);color:#fff}.secondary:hover,.text-button:hover,.corner:hover,.corner.selected{border-color:var(--accent);color:var(--accent)}.text-button{min-height:0;color:var(--accent);text-align:left;background:0 0;border:0;margin-top:10px;padding:0;font-size:.82rem}.check{color:var(--text);align-items:center;gap:10px;margin-top:12px;font-weight:600;display:flex}.check input{width:20px;height:20px;accent-color:var(--accent)}.field{color:var(--text);gap:8px;margin:20px 0;font-weight:900;display:grid}.field select{border:2px solid var(--text);background:var(--panel);min-height:48px;color:var(--text);padding:0 14px;font-weight:800}.controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:clamp(220px,32vh,360px);padding:0;display:grid}.recording-mode-button{letter-spacing:-.06em;text-align:center;view-transition-name:recording-entry-button;border:0;width:100%;min-height:100%;font-size:clamp(2rem,5vw,5rem);line-height:.9}.recording-entry-button{view-transition-name:recording-entry-button}#process-video{margin-right:12px}.controls-options{border-left:1px solid var(--line);flex-direction:column;justify-content:center;min-width:0;padding:clamp(22px,4vw,44px);display:flex}.controls-options .check:first-of-type{margin-top:0}.workspace>.panel:last-child{min-height:0;overflow:hidden}.recordings{gap:12px;max-height:min(42vh,420px);padding-right:4px;display:grid;overflow:auto}.recording-card{border:1px solid var(--line);padding:16px}.recording-card-actions{flex-shrink:0;gap:10px;display:flex}.recording-card.selected{border-color:var(--accent)}.recording-card strong,.recording-card span{display:block}.recording-card strong{overflow-wrap:anywhere}.processing-grid{grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:16px;height:100%;display:grid}.recording-dot{text-transform:uppercase;align-items:center;gap:10px;margin:18px 0;font-weight:900;display:inline-flex}.recording-dot span{background:var(--accent);border-radius:50%;width:12px;height:12px}#preview-video{object-fit:contain;border:1px solid var(--line);aspect-ratio:16/9;background:#111;width:100%;height:100%;min-height:0;max-height:calc(100dvh - 150px);display:block}.preview-container{flex-direction:column;gap:12px;height:100%;min-height:0;display:flex}.preview-container #preview-video{flex:1;min-height:0}.trim-timeline-wrapper{background:var(--panel);border:1px solid var(--line);-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:column;gap:12px;padding:12px 16px;display:flex}.trim-timeline-track-container{cursor:pointer;align-items:center;width:100%;height:24px;display:flex;position:relative}.trim-timeline-track{background:#dedbd266;border-radius:3px;width:100%;height:6px;position:relative}.trim-timeline-active-range{background:var(--accent);opacity:.85;border-radius:3px;height:100%;position:absolute}.trim-handle{background:var(--panel);border:2px solid var(--text);cursor:ew-resize;z-index:5;border-radius:50%;width:16px;height:16px;transition:transform .1s,border-color .1s,box-shadow .1s;position:absolute;top:50%;transform:translate(-50%,-50%)}.trim-handle:hover,.trim-handle:active{border-color:var(--accent);transform:translate(-50%,-50%)scale(1.15);box-shadow:0 0 0 4px #f05a2840}.trim-playhead{background:var(--text);pointer-events:none;z-index:3;width:2px;transition:left .1s linear;position:absolute;top:-8px;bottom:-8px}.trim-timeline-controls{justify-content:space-between;align-items:center;gap:16px;display:flex}.trim-play-pause-btn{background:var(--text);color:var(--panel);border:1px solid var(--text);cursor:pointer;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:700;transition:background .1s,color .1s,border-color .1s}.trim-play-pause-btn:hover{background:var(--accent);color:var(--panel);border-color:var(--accent)}.trim-time-display{color:var(--muted);align-items:center;gap:12px;font-family:monospace;font-size:13px;display:flex}.floating-recorder{z-index:20;aspect-ratio:1;border:3px solid var(--text);background:#111;place-items:end left;width:300px;display:grid;position:relative;overflow:hidden}.inline-recorder{z-index:1;width:min(520px,100%);box-shadow:10px 10px 0 var(--text)}#floating-recorder-fallback{width:min(300px,100vw - 32px);box-shadow:10px 10px 0 var(--text);position:fixed;bottom:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px)}.floating-recorder video,.floating-camera-placeholder{width:100%;height:100%;position:absolute;inset:0}.floating-recorder video{object-fit:cover}.floating-camera-placeholder{color:#fff;letter-spacing:.08em;text-transform:uppercase;place-items:center;font-weight:900;display:grid}.record-toggle{z-index:1;border:4px solid var(--text);background:#fff;border-radius:50%;place-items:center;width:66px;height:66px;margin:16px;padding:0;display:grid;position:relative;box-shadow:0 0 0 2px #fff}.record-toggle span{background:var(--accent);border-radius:50%;width:42px;height:42px;display:block}.floating-recorder.is-recording .record-toggle span{border-radius:5px;width:26px;height:26px}.recorder-controls{z-index:1;align-items:center;gap:0;display:flex;position:relative}.pause-toggle{color:#fff;cursor:pointer;background:#ffffff26;border:3px solid #fff;border-radius:50%;place-items:center;width:44px;height:44px;margin:16px 0 16px 16px;padding:0;font-size:16px;transition:background .15s;display:grid}.pause-toggle:hover{background:#ffffff4d}.recording-timer{z-index:2;text-align:center;letter-spacing:.06em;color:#fff;text-shadow:0 1px 6px #000000b3;pointer-events:none;font-size:22px;font-weight:900;position:absolute;bottom:30px;right:45px}.floating-recorder.is-paused .recording-timer{opacity:.5}@supports ((-webkit-backdrop-filter:blur(0)) or (backdrop-filter:blur(0))){#floating-recorder-fallback{background:#111111eb}}.corner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;display:grid}.live-recording-screen{background:var(--panel);place-items:center;width:100%;height:100dvh;display:grid;position:relative;overflow:hidden}#live-recording-preview{background:#111;width:100%;height:100%;display:block;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}#live-screen-video{object-fit:fill;background:#111;width:100%;height:100%;position:absolute;inset:0}.invisible{opacity:0;pointer-events:none;display:none}#live-camera-video{--live-camera-border-color:#ffffffeb;--live-camera-border-width:0px;--live-camera-shadow-blur:34px;--live-camera-shadow-color:#0000006b;--live-camera-shadow-offset-x:0px;--live-camera-shadow-offset-y:12px;--live-camera-border-radius:34px;--live-camera-margin:48px;--live-camera-size:clamp(220px, 28vmin, calc(100vmin - 48px));box-sizing:border-box;border:var(--live-camera-border-width) solid var(--live-camera-border-color);border-radius:var(--live-camera-border-radius);box-shadow:var(--live-camera-shadow-offset-x) var(--live-camera-shadow-offset-y) var(--live-camera-shadow-blur) var(--live-camera-shadow-color);width:var(--live-camera-size);height:var(--live-camera-size);object-fit:cover;transform-origin:50%;background:0 0;transition:all .3s;animation:.22s cubic-bezier(.2,.8,.2,1) live-camera-pop-in;position:absolute}@keyframes live-camera-pop-in{0%{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){#live-camera-video{animation:none}}@supports (corner-shape:squircle){#live-camera-video{--live-camera-border-radius:50%;corner-shape:squircle}}#live-camera-video.hidden{display:none}#live-camera-video.live-camera-resize-radius-nwse{cursor:nwse-resize}#live-camera-video.live-camera-resize-radius-nesw{cursor:nesw-resize}#live-camera-video.live-camera-resize-size-ns{cursor:ns-resize}#live-camera-video.live-camera-resize-size-ew{cursor:ew-resize}#live-camera-video.live-camera-is-resizing{transition:none}.live-camera-top-left{top:var(--live-camera-margin);left:var(--live-camera-margin)}.live-camera-top-right{top:var(--live-camera-margin);left:calc(100% - var(--live-camera-size) - var(--live-camera-margin))}.live-camera-bottom-left{top:calc(100% - var(--live-camera-size) - var(--live-camera-margin));left:var(--live-camera-margin)}.live-camera-bottom-right{top:calc(100% - var(--live-camera-size) - var(--live-camera-margin));left:calc(100% - var(--live-camera-size) - var(--live-camera-margin))}#live-camera-video.live-camera-fullscreen{width:100%;height:100%;box-shadow:none;inset:0;border-radius:0!important}.live-preview-modes{z-index:2;gap:8px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.live-preview-modes .secondary{white-space:nowrap;min-height:40px;padding:0 12px}.live-preview-modes .secondary.selected{border-color:var(--accent);color:var(--accent)}.live-settings{z-index:2;position:fixed;top:16px;left:16px}.live-settings-button{background:var(--panel)}.live-settings-dropdown{background:var(--panel);border:2px solid var(--text);width:min(320px,100vw - 32px);box-shadow:8px 8px 0 var(--text);margin-top:10px;padding:18px;display:none}.live-reshare-button{width:100%;margin-bottom:16px}.live-settings:hover .live-settings-dropdown,.live-settings:focus-within .live-settings-dropdown{display:block}.live-settings-dropdown .check{margin-top:0;margin-bottom:18px}.live-corner-grid{margin-bottom:0}.live-share-button{z-index:1;letter-spacing:-.04em;min-width:min(320px,100vw - 40px);min-height:76px;font-size:clamp(1.5rem,4vw,3rem);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.pip-live-share{background:var(--panel);place-items:center;width:100vw;height:100vh;padding:0;display:grid;position:relative}.pip-live-recorder{grid-template-rows:minmax(0,1fr)}.pip-camera-recorder{aspect-ratio:auto;z-index:1;border:0;width:100vw;height:100vh}@media (width<=900px){body{overflow:auto}.shell{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;height:auto;min-height:100dvh}.sidebar{grid-template-rows:auto;grid-template-columns:minmax(0,1fr) minmax(220px,320px);align-items:end}.workspace{overflow:visible}.recorder-grid,.processing-grid{grid-template-columns:1fr}#preview-video{height:auto}}@media (width<=640px){.shell{padding:10px}.sidebar{grid-template-columns:1fr;padding:18px}.action-panel,.section-heading,.recording-card{flex-direction:column;align-items:stretch}.controls{grid-template-columns:1fr}.controls-options{border-top:1px solid var(--line);border-left:0}.action-panel{gap:20px}.primary,.secondary,.danger{width:100%}}.pip-controls{z-index:2;align-items:flex-end;gap:8px;display:flex;position:absolute;top:15px;left:20px}.pip-corner-grid{grid-template-columns:repeat(2,1fr);gap:3px;display:grid}.pip-corner-btn{cursor:pointer;background:#ffffff26;border:1.5px solid #fff6;border-radius:2px;width:16px;height:12px;min-height:0;padding:0;transition:background .12s,border-color .12s}.pip-corner-btn.is-active{background:var(--accent);border-color:var(--accent)}.pip-corner-btn:hover:not(.is-active){background:#ffffff4d;border-color:#ffffffbf}.pip-mode-btns{gap:4px;display:flex}.pip-mode-btn{color:#ffffffa6;cursor:pointer;background:#ffffff1f;border:1.5px solid #ffffff59;border-radius:4px;place-items:center;width:28px;height:28px;min-height:0;padding:0;transition:background .12s,border-color .12s,color .12s;display:grid}.pip-mode-btn svg{width:16px;height:16px}.pip-mode-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.pip-mode-btn:hover:not(.is-active){color:#fff;background:#ffffff40;border-color:#ffffffb3}