: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;min-width:320px;min-height:100vh;display:block}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app-root{min-height:100vh;max-width:100%;margin:0;padding:1rem 1.5rem 2rem;display:flex;flex-direction:column;gap:1.5rem;box-sizing:border-box}.landing-connect{display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}.top-bar{display:flex;gap:.75rem;align-items:flex-end;padding:.5rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.08);background:#0f172a99;flex-shrink:0;flex-wrap:wrap}.stream-presets{display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem}.stream-presets__label{font-size:.8rem;opacity:.75;letter-spacing:.02em}.stream-presets__row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.stream-preset-btn{padding:.45rem .85rem;border-radius:.5rem;border:1px solid rgba(148,163,184,.35);background:#1e293bd9;color:inherit;font-size:.88rem;font-weight:500;cursor:pointer;line-height:1.2}.stream-preset-btn:hover{border-color:#60a5fa8c;background:#2563eb33}.stream-preset-btn:active{transform:scale(.98)}.region-label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}.region-select{padding:.5rem 2rem .5rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);background-color:#0003;color:inherit;min-width:130px;line-height:1.2;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px}.connect-label{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:220px;font-size:.85rem}.connect-input{padding:.55rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);background-color:#0003;color:inherit}.connect-input::placeholder{opacity:.5}.connect-button{padding:.65rem 1.6rem;border-radius:.65rem;border:1px solid rgba(59,130,246,.8);font-size:.95rem;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;white-space:nowrap}.connect-button:hover{opacity:.9}.connect-button--test{background:transparent;border-color:#22c55ecc;color:#86efac}.connect-button--test:hover{background:#22c55e33}.app-layout{flex:1;display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:1rem;align-items:stretch;min-height:0;width:100%;max-width:none;margin:0;padding-inline:clamp(12px,2vw,28px);min-height:calc(100vh - 5rem);height:calc(100vh - 5rem)}.sidebar-column{display:flex;flex-direction:column;gap:.5rem;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;align-items:stretch}.sidebar-column .control-panel{flex-shrink:0}.video-column{min-width:0;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;min-height:0;align-self:stretch}.video-column-inner{display:flex;flex-direction:column;gap:.5rem;min-height:0;flex:1}.video-column__media-anchor{flex-shrink:0;width:100%;display:flex;flex-direction:column;align-items:center}.video-column__media-anchor--after-clip{flex-shrink:0;align-self:center}.live-preview-pane{position:relative;flex-shrink:0;width:100%;max-width:min(100%,320px);margin-inline:auto;border-radius:.55rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#000}.live-preview-pane .stream-view,.live-preview-pane .stream-video-container--canvas{display:block;width:100%}.live-preview-pane .stream-canvas{width:100%;height:auto;vertical-align:top}.clip-stage{flex:1;min-height:180px;display:flex;flex-direction:column;min-width:0;filter:none}.clip-recording-placeholder{flex:1;min-height:180px;display:flex;align-items:center;justify-content:center;border-radius:.75rem;border:1px dashed rgba(148,163,253,.45);color:#bfdbfe;font-size:.85rem;background:#0f172a73}.clip-stage .jpeg-clip-view .stream-video-container--canvas{width:100%}.clip-stage .stream-canvas{width:100%;height:auto;vertical-align:top}.video-column-footer{display:flex;flex-direction:column;align-items:center;flex-shrink:0;margin-top:auto}.video-column-footer--hints{gap:.15rem;padding-top:.35rem}.video-column-footer--hints .snap-hint{margin:0;text-align:center}.live-stream-pip{flex-shrink:0;width:100%;border-radius:.5rem;overflow:hidden;border:2px solid rgba(255,255,255,.25);box-shadow:0 4px 12px #0006;background:#000}.live-stream-pip__container{position:relative;aspect-ratio:16 / 10;width:100%}.live-stream-pip__canvas{display:block;width:100%;height:100%;object-fit:cover;background:#000}.canvas-source-video{position:absolute;width:0;height:0;opacity:0;pointer-events:none;overflow:hidden}.stream-video-container--canvas{position:relative;display:flex}.stream-canvas{display:block;width:100%;height:auto;background:#000}.clip-error{margin:0 0 .5rem;padding:.5rem .75rem;font-size:.85rem;color:#fecaca;background:#b91c1c40;border-radius:.5rem}.media-control-bar{display:flex;flex-direction:column;gap:.5rem}.media-control-row{display:flex;gap:.5rem;flex-wrap:wrap}.media-control-row--nav,.media-control-row--actions{justify-content:flex-start}.media-btn{padding:.5rem .85rem;border-radius:.5rem;font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;transition:opacity .15s}.media-btn:disabled{opacity:.5;cursor:not-allowed}.media-btn--outline{border:1px solid rgba(96,165,250,.8);background:transparent;color:#93c5fd}.media-btn--outline:hover:not(:disabled){background:#60a5fa26}.media-btn--primary{border:none;background:#22c55e;color:#fff}.media-btn--primary:hover:not(:disabled){background:#16a34a}.media-btn--danger{border:1px solid rgba(248,113,113,.8);background:transparent;color:#fca5a5}.media-btn--danger:hover{background:#f8717133}.media-btn--stop{border:none;background:#ef4444;color:#fff}.media-btn--stop:hover:not(:disabled){background:#dc2626}.jpeg-clip-view{max-width:100%;width:100%;display:flex;flex-direction:column;filter:none}.jpeg-clip-view .stream-video-container--canvas{width:100%;border-radius:.75rem;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1)}.jpeg-clip-view .stream-canvas{width:100%;height:auto;display:block;vertical-align:top}.jpeg-clip-info{display:flex;gap:1rem;font-size:.8rem;opacity:.75;padding:.25rem 0;justify-content:center}.jpeg-clip-counter{font-variant-numeric:tabular-nums}.jpeg-clip-time{font-variant-numeric:tabular-nums;color:#93c5fd}.snap-hint{font-size:.78rem;color:#86efac;margin:0 0 .25rem;opacity:.9}.stream-view{flex:1;min-height:0;display:flex}.stream-view--clip-mode{position:relative;flex:1;min-height:0}.stream-view-clip{flex:1;min-height:0;display:flex}.stream-view-clip .stream-video-container{flex:1}.stream-video-container{flex:1;border-radius:.75rem;overflow:hidden;background-color:#000;border:1px solid rgba(255,255,255,.1)}.stream-video{display:block;width:100%;height:100%;object-fit:contain;background-color:#000}.video-main-wrapper{position:relative}.jpeg-latency-indicator{position:absolute;top:.5rem;right:.75rem;padding:.25rem .55rem;border-radius:999px;font-size:.75rem;background:#0f172ad1;border:1px solid rgba(148,163,253,.7);color:#bfdbfe;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;font-variant-numeric:tabular-nums}.control-panel{width:100%;min-width:0;box-sizing:border-box;border-radius:.55rem;padding:.55rem .5rem;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at top left,rgba(148,163,253,.18),transparent 55%),#0f172ad9;display:flex;flex-direction:column;gap:.5rem}.control-panel-session{padding:.35rem 0;margin-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.72rem;line-height:1.45}.control-panel-session-row{opacity:.9;overflow-wrap:anywhere;word-break:break-word}.control-panel-session-row--buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem;margin-bottom:.25rem}.control-panel-session-divider{flex-shrink:0;align-self:stretch;width:1px;min-height:1.35rem;margin-inline:.1rem;background:#ffffff47}.control-panel-session-toggle{padding:.28rem .45rem;border-radius:.35rem;border:1px solid rgba(148,163,253,.7);background:transparent;color:inherit;cursor:pointer;font-family:inherit}.control-panel-session-toggle--active{background:#818cf84d}.control-panel-session-icon{width:14px;height:14px;display:block}.control-panel-session-icon path{fill:#fff}.control-panel-session-disconnect{margin-top:.5rem;padding:.3rem .5rem;font-size:.7rem;background:transparent;border:1px solid rgba(248,113,113,.6);color:#fca5a5;border-radius:.35rem;cursor:pointer;font-family:inherit}.control-panel-session-disconnect:hover{background:#f8717126}.control-panel-session-error{margin-top:.35rem;color:#fca5a5;overflow-wrap:anywhere;word-break:break-word}.control-panel-title{margin:0;font-size:.88rem}.control-panel-preset{margin:.4rem 0 .5rem;display:flex;flex-direction:column;gap:.25rem}.control-panel-preset-hint{line-height:1.35}.control-grid{display:flex;flex-direction:column;gap:.45rem}.control-item{display:flex;flex-direction:column;gap:.15rem;font-size:.72rem;min-width:0}.control-item input[type=range]{width:100%;min-width:0;max-width:100%}.control-item--smoothness{gap:.15rem}.control-item-smoothness-toggle{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:.32rem .5rem;border-radius:.35rem;border:1px solid rgba(148,163,253,.7);background:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:.72rem;line-height:1.2;text-align:center}.control-item-smoothness-toggle:hover:not(:disabled){border-color:#bfdbfef2}.control-item-smoothness-toggle:disabled{opacity:.45;cursor:not-allowed}.control-item-smoothness-toggle--active{background:#818cf84d}.control-panel-fps-meta{display:block;margin:.08rem 0 0;font-size:.62rem;line-height:1.35;opacity:.78;font-variant-numeric:tabular-nums;font-weight:400}.control-helper{margin:0;font-size:.75rem;opacity:.7}.control-panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.45rem;padding-top:.4rem;border-top:1px solid rgba(255,255,255,.08)}.control-panel-btn{min-width:0;padding:.35rem .4rem;font-size:.72rem;text-align:center;line-height:1.25;font-weight:500;border-radius:.5rem;cursor:pointer;font-family:inherit}.control-panel-btn:disabled{opacity:.5;cursor:not-allowed}.control-panel-btn--reset{border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit}.control-panel-btn--reset:hover:not(:disabled){background:#ffffff14}.control-panel-btn--apply{border:none;background:#22c55ecc;color:#fff}.control-panel-btn--apply:hover:not(:disabled){background:#16a34a}@media(max-width:900px){.app-root{height:auto}.app-layout{height:auto;grid-template-columns:1fr;row-gap:1rem}.sidebar-column{width:100%;max-width:min(100%,360px);margin:0 auto}}