*{box-sizing:border-box}:root{--color-accent: #007bff;--color-bg: #000;--color-text: #e0e0e0;--color-text-muted: #777;--color-focused: var(--color-accent);--panel-width: 420px;--color-panel-bg: #111}html,body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;background-color:var(--color-bg);font-family:Google Sans Flex,sans-serif;font-optical-sizing:auto;font-style:normal;color:var(--color-text)}body{display:flex;align-items:center;justify-content:center;position:relative}main{height:100%;width:100%;margin:0;padding:0;overflow:hidden;background-color:var(--color-bg);flex:1;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform;&.open{transform:translate(calc(var(--panel-width) / -2))}}#panel-toggle{position:fixed;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:16px;padding:0;cursor:pointer;outline:none;border:none;background-color:var(--color-bg);opacity:0;transition:opacity .1s ease,right .7s cubic-bezier(.4,0,.2,1),border-color 2s cubic-bezier(.4,0,.2,1);&:hover{opacity:1;border:2px solid var(--color-text);transition:border .1s ease;svg{fill:var(--color-text);transition:fill .1s ease}}&.open{background-color:transparent;opacity:1;&:hover{border:none;svg{fill:var(--color-text-muted)}}}svg{height:24px;width:24px;fill:var(--color-text);transition:transform .35s ease}&.open svg{transform:rotate(180deg)}}#config-panel{position:fixed;right:calc(var(--panel-width) * -1);top:calc(50% - 512px);height:1024px;width:var(--panel-width);background-color:var(--color-panel-bg);border-left:1px solid var(--panel-border);border-radius:16px 0 0 16px;z-index:99;overflow-y:auto;overflow-x:hidden;padding:32px 48px 32px 32px;transition:right .35s cubic-bezier(.35,-.22,.27,1.22);&.open{right:0}}#config-panel-inner{section{h4{text-transform:uppercase;font-size:12px;font-weight:600;color:var(--color-text-muted);margin-top:0;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--color-text-muted)}}section{display:flex;flex-direction:column;margin-bottom:24px}section:last-child{margin-bottom:0}.parameter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;label{font-size:13px;flex-shrink:0}input{width:128px;padding:8px;border:1px solid var(--color-text-muted);border-radius:8px;font-size:14px;color:var(--color-text);background-color:var(--color-panel-bg);transition:border-color .35s ease;&:focus{outline:none;border-color:var(--color-accent)}}input[type=checkbox]{appearance:none;width:40px;height:22px;padding:0;border-radius:11px;position:relative;cursor:pointer;&:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background-color:var(--color-text-muted);transition:transform .2s ease,background-color .2s ease}&:checked{border-color:var(--color-accent);background-color:var(--color-accent)}&:checked:after{transform:translate(18px);background-color:#fff}}}.button-row{display:flex;gap:8px}.button-row button{flex:1}section button{padding:8px;border:2px solid var(--color-text-muted);border-radius:8px;font-size:14px;color:var(--color-text);background-color:var(--color-panel-bg);transition:border-color .35s ease;cursor:pointer;&:hover{border-color:var(--color-text)}&:focus{outline:none;border-color:var(--color-accent)}}section#presets{height:360px;#presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(69px,1fr));gap:8px;.preset-item{aspect-ratio:1;background-color:var(--color-panel-bg);border:1px solid var(--color-text-muted);color:var(--color-text);border-radius:8px;transition:border-color .2s ease,transform .15s ease;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;&:hover{border-color:var(--color-text)}&:focus{outline:none;border-color:var(--color-accent)}img{width:100%;height:100%;object-fit:cover;border-radius:6px}}}}}#timeline-bar{position:fixed;bottom:0;left:0;right:0;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:8px 16px 10px;gap:8px;z-index:90}#timeline-top-row{display:flex;align-items:center;gap:6px}#timeline-bottom-row{display:flex;align-items:center;gap:12px}#transport-buttons{display:flex;gap:4px}#secondary-buttons{display:flex;gap:4px;margin-left:4px}#timeline-bar button{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--color-text-muted);border-radius:6px;background:var(--color-panel-bg);color:var(--color-text);cursor:pointer;font-size:12px;transition:border-color .15s ease,background-color .15s ease;&:hover{border-color:var(--color-text)}&:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}}#record-stop-btn i{color:#f44}#record-stop-btn.recording{background:#f443;border-color:#f44;i{animation:pulse-record 1.5s ease-in-out infinite;color:var(--color-text)}}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.5}}.hidden{display:none!important}#capture-config-toggle.active{border-color:var(--color-accent)}#capture-config{display:flex;gap:10px;align-items:center;overflow:hidden;max-width:400px;opacity:1;padding-left:8px;transition:max-width .2s ease,opacity .15s ease;&.collapsed{max-width:0;opacity:0;padding:0;pointer-events:none}}.config-field{display:flex;gap:4px;align-items:center;white-space:nowrap;label{font-size:11px;color:var(--color-text-muted)}input{width:48px;height:24px;padding:2px 4px;font-size:11px;color:var(--color-text);background:var(--color-panel-bg);border:1px solid var(--color-text-muted);border-radius:4px;transition:border-color .15s ease;&:focus{outline:none;border-color:var(--color-accent)}}}.config-hint{font-size:11px;color:var(--color-text-muted)}#timeline-track{flex:1;height:12px;background:#333;border-radius:6px;position:relative;cursor:pointer}#timeline-filled{position:absolute;inset:0 auto 0 0;background:var(--color-accent);border-radius:6px;pointer-events:none}#timeline-scrubber{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--color-accent);transform:translate(-50%,-50%);cursor:grab;z-index:2;box-shadow:0 1px 4px #0006;transition:transform .1s ease;&:hover{transform:translate(-50%,-50%) scale(1.15)}&:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.95)}}#timeline-label{font-size:12px;color:var(--color-text-muted);white-space:nowrap;min-width:100px;text-align:right}