.neattake-editor-preview{background:var(--demo-shell);min-width:0;color:var(--demo-ink);border:1px solid var(--demo-stroke);--demo-shell:var(--card);--demo-ground:var(--background);--demo-well:var(--secondary);--demo-stroke:var(--border);--demo-ink:var(--foreground);--demo-muted:var(--muted-foreground);--demo-accent:var(--primary);--demo-selected:color-mix(in srgb, var(--primary) 12%, var(--card));--demo-lane-amber:#925a08;--demo-lane-sky:#0369a1;--demo-lane-violet:#6d28d9;--demo-duration:8s;--demo-play-state:paused;border-radius:16px;position:relative;overflow:hidden;container-type:inline-size}.neattake-editor-preview[data-motion-active=true]{--demo-play-state:running}.demo-editor-header{border-bottom:1px solid var(--demo-stroke);align-items:center;gap:1cqw;height:9%;padding:0 2cqw;font-size:1.2cqw;display:flex;position:absolute;inset:0 0 auto}.demo-editor-logo{width:2.5cqw;height:2.5cqw}.demo-header-divider{border-left:1px solid var(--demo-stroke);height:1.5cqw;margin:0 .3cqw}.demo-project-name{color:var(--demo-muted)}.demo-sample-label{color:var(--demo-muted);margin-left:auto;font-size:1cqw}.demo-editor-workspace{grid-template-columns:minmax(0,1fr) 27% 6%;display:grid;position:absolute;inset:9% 0 26%}.demo-preview-canvas{background:var(--demo-ground);position:relative;overflow:hidden}.demo-canvas-frame{background:#b9cff1;border-radius:1cqw;padding:5%;position:absolute;inset:8% 6% 13%}.demo-recording-viewport{background:#f8fafc;border-radius:.7cqw;height:100%;position:relative;overflow:hidden;box-shadow:0 .8cqw 2cqw #13294c35}.neattake-recorded-content{height:100%;transform-origin:var(--zoom-origin-x,100%) var(--zoom-origin-y,100%);position:relative}.demo-sample-project{color:#243447;background:#fafbfe;height:100%;font-size:.88cqw}.demo-project-topbar{border-bottom:1px solid #e4e8ef;align-items:center;gap:.7cqw;height:14%;padding:0 3%;display:flex}.demo-project-mark{color:#fff;background:#253b5b;border-radius:.4cqw;place-items:center;width:1.7cqw;height:1.7cqw;display:grid}.demo-project-mark svg{width:1cqw;height:1cqw}.demo-project-top-label{color:#728096;margin-left:1cqw}.demo-project-topbar>svg{width:1.4cqw;margin-left:auto}.demo-project-body{grid-template-columns:22% 1fr;height:86%;display:grid}.demo-project-sidebar{background:#f1f4f9;border-right:1px solid #e4e8ef;flex-direction:column;gap:1.2cqw;padding:14% 10%;font-size:.75cqw;display:flex}.demo-project-sidebar>span{color:#677589;align-items:center;gap:.5cqw;display:flex}.demo-project-sidebar svg{width:.9cqw;height:.9cqw}.demo-project-sidebar small{color:#8792a4;letter-spacing:.04em;margin-top:1cqw;font-size:.6cqw}.demo-project-sidebar strong{color:#2563eb;font-weight:550}.demo-project-board{padding:3.5% 5%}.demo-board-heading{color:#7b8797;justify-content:space-between;font-size:.7cqw;display:flex}.demo-board-members{color:#516a95}.demo-project-board h3{letter-spacing:-.05em;margin:1.1cqw 0 .3cqw;font-size:1.65cqw;font-weight:650;line-height:1.15}.demo-project-board>p{color:#7b8797;font-size:.75cqw}.demo-board-columns{grid-template-columns:1fr 1fr;gap:1.3cqw;margin-top:1.4cqw;display:grid}.demo-board-columns small{color:#768395;letter-spacing:.05em;justify-content:space-between;font-size:.6cqw;display:flex}.demo-board-columns article{background:#fff;border:1px solid #dde5ef;border-radius:.6cqw;margin-top:.6cqw;padding:1cqw;position:relative}.demo-task-tag{color:#577baa;background:#edf3fc;border-radius:.2cqw;padding:.2cqw .4cqw;font-size:.6cqw;display:inline-block}.demo-board-columns article strong{margin:.6cqw 0 .3cqw;font-size:1cqw;font-weight:650;display:block}.demo-board-columns article p{color:#7b8797;font-size:.7cqw}.demo-card-art{background:#dce7f5;border-radius:.3cqw;align-items:end;gap:.4cqw;height:3.1cqw;margin-top:.8cqw;padding:.5cqw .8cqw;display:flex}.demo-card-art span{background:#7b9fc7;border-radius:.2cqw;width:25%;height:75%}.demo-card-art span:nth-child(2){background:#a9bfda;height:50%}.demo-card-art span:nth-child(3){background:#41658c;height:90%}.demo-board-columns footer{color:#7b8797;align-items:center;gap:.3cqw;margin-top:.8cqw;font-size:.6cqw;display:flex}.demo-board-columns footer span{color:#5e7596;background:#e8eef7;border-radius:.2cqw;margin-right:auto;padding:.2cqw .3cqw}.demo-board-columns footer svg{width:.8cqw;height:.8cqw}.demo-sample-target{color:#fff;background:#2563eb;border-radius:.35cqw;justify-content:space-between;align-items:center;margin-top:1.2cqw;padding:.65cqw .6cqw;font-size:.75cqw;display:flex}.demo-sample-target svg{width:.9cqw;height:.9cqw}.demo-canvas-status{color:var(--demo-muted);justify-content:space-between;font-size:.8cqw;display:flex;position:absolute;inset:auto 6% 5%}.demo-canvas-status>span:first-child{align-items:center;gap:.5cqw;display:flex}.demo-status-dot{background:#60a5fa;border-radius:50%;width:.4cqw;height:.4cqw}.demo-inspector{background:var(--demo-shell);border-inline:1px solid var(--demo-stroke);font-size:1cqw;overflow:hidden}.demo-inspector>header{border-bottom:1px solid var(--demo-stroke);align-items:center;gap:.7cqw;height:16%;padding:0 1.7cqw;display:flex}.demo-inspector header svg{width:1.4cqw;height:1.4cqw;color:var(--demo-accent)}.demo-inspector header svg:last-child{width:1.1cqw;color:var(--demo-muted);margin-left:auto}.demo-inspector-body{padding:2cqw 1.7cqw}.demo-inspector-section{justify-content:space-between;align-items:center;gap:.5cqw;display:flex}.demo-inspector-section strong{font-weight:550}.demo-inspector-section>span{color:var(--demo-muted);font-size:.75cqw}.demo-inspector-choices{background:var(--demo-well);border-radius:.5cqw;gap:.25cqw;margin-top:1.2cqw;padding:.3cqw;display:grid}.demo-inspector-choices span{text-align:center;color:var(--demo-muted);white-space:nowrap;text-overflow:ellipsis;border-radius:.3cqw;padding:.65cqw .1cqw;font-size:.7cqw;overflow:hidden}.demo-inspector-choices .demo-choice-active{color:#fff;background:#2563eb}.demo-inspector-slider{margin-top:1.7cqw}.demo-inspector-slider>div:first-child{color:var(--demo-muted);justify-content:space-between;gap:.5cqw;font-size:.8cqw;display:flex}.demo-inspector-slider>div:first-child>span:last-child{color:var(--demo-ink)}.demo-slider-track{background:var(--demo-stroke);border-radius:1cqw;height:.2cqw;margin-top:.8cqw}.demo-slider-track span{background:var(--demo-accent);border-radius:inherit;width:62%;height:100%;display:block;position:relative}.demo-slider-track span:after{content:"";background:var(--demo-accent);border-radius:50%;width:.6cqw;height:.6cqw;position:absolute;top:-.2cqw;right:0}.demo-inspector-details{border-top:1px solid var(--demo-stroke);margin-top:2cqw;padding-top:1.5cqw}.demo-inspector-details small{color:var(--demo-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7cqw}.demo-inspector-details>div{gap:.5cqw;margin-top:.7cqw;display:flex}.demo-inspector-details span{background:var(--demo-selected);color:var(--demo-accent);border-radius:.3cqw;padding:.6cqw .7cqw;font-size:.7cqw}.demo-inspector-note{color:var(--demo-muted);gap:.7cqw;margin-top:3cqw;font-size:.85cqw;line-height:1.6;display:flex}.demo-inspector-note svg{width:1.2cqw;color:var(--demo-accent)}.demo-inspector-rail{background:var(--demo-well);flex-direction:column;align-items:center;gap:.4cqw;padding:1.3cqw 0;display:flex}.demo-inspector-rail>svg{width:1.4cqw;height:1.4cqw;color:var(--demo-muted);margin-bottom:.6cqw}.demo-inspector-rail .demo-rail-button{width:3.3cqw;min-width:0;height:3.3cqw;min-height:0;color:var(--demo-muted);border-radius:.6cqw;place-items:center;display:grid}.demo-rail-button svg{width:1.6cqw;height:1.6cqw}.demo-inspector-rail .demo-rail-button:is([aria-pressed=true],[data-selected=true]){background:var(--demo-selected);color:var(--demo-accent)}.demo-inspector-rail .demo-rail-button:hover{background:var(--demo-selected);color:var(--demo-ink)}.demo-inspector-rail .demo-rail-settings{margin-top:auto}.demo-timeline{background:var(--demo-shell);border-top:1px solid var(--demo-stroke);height:26%;position:absolute;inset:auto 0 0}.demo-transport{border-bottom:1px solid var(--demo-stroke);height:33%;color:var(--demo-muted);align-items:center;gap:1.1cqw;padding:0 1.6cqw;font-size:.85cqw;display:flex}.demo-transport>svg{width:1.2cqw}.demo-transport .demo-play-button{background:var(--demo-well);width:2.8cqw;height:2.8cqw;color:var(--demo-ink);border-radius:.5cqw}.demo-play-button svg{width:1.3cqw;height:1.3cqw}.demo-progress{background:var(--demo-stroke);border-radius:1cqw;flex:1;height:.25cqw;overflow:hidden}.demo-progress-fill{background:var(--demo-accent);transform-origin:0;width:100%;height:100%;display:block;transform:scaleX(.5)}.demo-preview-label{color:var(--demo-muted)}.demo-timeline-tracks{grid-template-columns:12% 1fr;height:67%;display:grid}.demo-track-labels{border-right:1px solid var(--demo-stroke);color:var(--demo-muted);flex-direction:column;gap:2.7cqw;padding:1cqw 1.6cqw;font-size:.85cqw;display:flex}.demo-track-content{margin:.8cqw 1.1cqw;position:relative}.demo-clip{border:1px solid var(--demo-accent);background:var(--demo-selected);border-radius:.4cqw;gap:0;height:52%;padding:0;display:flex;position:relative;overflow:hidden}.demo-clip-thumbnail{border-right:1px solid var(--demo-stroke);background:#dae4f1;width:12.5%;height:100%;overflow:hidden}.demo-clip-thumbnail img{object-fit:cover;opacity:.82;width:100%;height:100%;display:block}.demo-clip-name{z-index:1;color:#fff;background:#23354edb;border-radius:.2cqw;padding:.15cqw .4cqw;font-size:.7cqw;position:absolute;top:.4cqw;left:.5cqw}.demo-feature-lane{white-space:nowrap;border-radius:.3cqw;align-items:center;height:30%;padding:0 .8cqw;font-size:.75cqw;display:flex;position:absolute;bottom:0}.demo-track-playhead{pointer-events:none;width:100%;position:absolute;inset:-.4cqw auto -.3cqw 0;transform:translate(50%)}.demo-track-playhead:before{content:"";background:var(--demo-accent);width:1px;position:absolute;inset:0 auto 0 0}.demo-track-playhead>span{background:var(--demo-accent);border-radius:.15cqw;width:.6cqw;height:.6cqw;position:absolute;transform:translate(-50%)}.neattake-zoom-frame{left:var(--target-left,60%);top:var(--target-top,80%);width:var(--target-width,30%);height:var(--target-height,10%);opacity:0;border:1px solid #3279eb;border-radius:.5cqw;position:absolute}.neattake-zoom-frame span{color:#fff;background:#2563eb;border-radius:.2cqw;padding:.2cqw .4cqw;font-size:.7cqw;position:absolute;top:-.9cqw;left:.7cqw}.demo-cursor-layer{pointer-events:none;position:absolute;inset:0}.demo-cursor-runner{transform:translate(var(--target-x,73%), var(--target-y,85%));position:absolute;inset:0}.demo-cursor-runner>svg{width:2cqw;height:2cqw;transform:translate(-12.5%,-12.5%)}.demo-click-ring{opacity:0;border:2px solid #60a5fa;border-radius:50%;width:2cqw;height:2cqw;position:absolute;top:-1cqw;left:-1cqw}.demo-caption{color:#d1dbe9;background:#142236ed;border-radius:.5cqw;gap:.35em;width:max-content;margin:auto;padding:.8cqw 1.2cqw;font-size:1.8cqw;font-weight:600;display:flex;position:absolute;bottom:9%;left:0;right:0}.demo-caption-word{position:relative}.demo-caption-word>span{color:#fff;opacity:0;background:#2563eb;border-radius:.2cqw;position:absolute;inset:0}.demo-camera-frame{aspect-ratio:1;background:#355675;border:.25cqw solid #fff;border-radius:50%;width:23%;position:absolute;bottom:12%;right:7%;overflow:hidden;box-shadow:0 .4cqw 1cqw #152b4855}.demo-camera-frame img{object-fit:cover;width:100%;height:100%;display:block}.demo-camera-frame>span{color:#fff;text-align:center;white-space:nowrap;background:#132236b8;border-radius:999px;padding:.25cqw .5cqw;font-size:.6cqw;position:absolute;inset:auto auto 9% 50%;transform:translate(-50%)}.demo-progress-fill{animation:demo-progress var(--demo-duration) linear infinite}.demo-track-playhead{animation:demo-playhead var(--demo-duration) linear infinite}[data-demo-mode=zoom] .neattake-recorded-content{animation:demo-zoom var(--demo-duration) cubic-bezier(.45, 0, .15, 1) infinite}.neattake-zoom-frame{animation:demo-focus var(--demo-duration) ease infinite}.demo-cursor-runner{animation:demo-cursor var(--demo-duration) cubic-bezier(.45, 0, .15, 1) infinite}.demo-click-ring{animation:demo-click var(--demo-duration) ease-out infinite}.demo-caption-word>span{animation:demo-word var(--demo-duration) linear infinite;animation-delay:calc(var(--word-index) * .65s)}.demo-camera-frame{animation:demo-camera var(--demo-duration) cubic-bezier(.45, 0, .15, 1) infinite}[data-demo-mode=workflow] .demo-recording-viewport{animation:demo-compose var(--demo-duration) cubic-bezier(.45, 0, .15, 1) infinite}.neattake-editor-preview :is(.demo-progress-fill,.demo-track-playhead,.neattake-recorded-content,.neattake-zoom-frame,.demo-cursor-runner,.demo-click-ring,.demo-caption-word>span,.demo-camera-frame,.demo-recording-viewport){animation-play-state:var(--demo-play-state)}@keyframes demo-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes demo-playhead{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes demo-zoom{0%,25%,90%,to{transform:scale(1)}38%,63%{transform:scale(1.5)}}@keyframes demo-focus{0%,19%,38%,to{opacity:0}23%,29%{opacity:1}}@keyframes demo-cursor{0%,12%,to{transform:translate(35%,82%)}25%,66%{transform:translate(var(--target-x,73%), var(--target-y,85%))}82%{transform:translate(48%,74%)}}@keyframes demo-click{0%,26%,40%,to{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(.6)}38%{opacity:0;transform:scale(2.2)}}@keyframes demo-word{0%,25%,34%,to{opacity:0}26%,33%{opacity:1}}@keyframes demo-camera{0%,15%,92%,to{transform:translate(0)}30%,66%{transform:translate(-230%)}}@keyframes demo-compose{0%,14%,92%,to{transform:scale(1.1)}32%,68%{transform:scale(.92)}}@container (width<=520px){.demo-editor-workspace{grid-template-columns:minmax(0,1fr)}.demo-inspector,.demo-inspector-rail{display:none}.demo-editor-header{gap:2cqw;font-size:2.4cqw}.demo-editor-logo{width:4cqw;height:4cqw}.demo-sample-label{font-size:1.7cqw}.demo-sample-project{font-size:1.5cqw}.demo-project-board h3{font-size:2.8cqw}.demo-project-top-label,.demo-project-sidebar,.demo-project-board>p,.demo-board-columns article p,.demo-sample-target{font-size:1.2cqw}.demo-board-columns article strong{font-size:1.65cqw}.demo-board-heading,.demo-board-columns small{font-size:1cqw}.demo-project-board h3{margin-top:1.6cqw}.demo-board-columns{gap:2cqw;margin-top:2cqw}.demo-board-columns article{margin-top:1cqw;padding:1.6cqw}.demo-task-tag,.demo-board-columns footer{font-size:1cqw}.demo-card-art{height:5cqw}.demo-sample-target{margin-top:1.6cqw;padding:1cqw}.demo-canvas-status,.demo-track-labels,.demo-time-label,.demo-preview-label{font-size:1.8cqw}.demo-caption{font-size:3cqw}.demo-camera-frame>span{font-size:1.3cqw}.demo-clip-name,.demo-feature-lane{font-size:1.5cqw}.demo-transport .demo-play-button{width:28px;height:28px}.demo-play-button svg{width:13px;height:13px}.demo-cursor-runner>svg{width:3cqw;height:3cqw}.demo-track-labels{gap:2.5cqw}}@media (prefers-reduced-motion:reduce){.neattake-editor-preview *{animation:none!important}.neattake-zoom-frame,.demo-caption-word:first-child>span{opacity:1}.demo-click-ring{opacity:.65;transform:scale(1.2)}}@container (width<=520px){.demo-canvas-frame{padding:3%;inset:6% 5% 13%}.demo-project-board h3{margin-top:1cqw;font-size:2.4cqw}.demo-board-columns{margin-top:1.2cqw}.demo-board-columns article{padding:1.2cqw}.demo-card-art{height:3.5cqw;margin-top:.5cqw}.demo-sample-target{margin-top:.7cqw;padding:.7cqw}.demo-board-columns footer{margin-top:.5cqw}.demo-timeline{height:30%}.demo-editor-workspace{bottom:30%}.demo-transport{height:38%}.demo-timeline-tracks{height:62%}}.demo-gradient-presets{grid-template-columns:repeat(6,1fr);gap:.5cqw;margin-top:1cqw;display:grid}.demo-gradient-presets button{aspect-ratio:1;border:1px solid var(--demo-stroke);border-radius:.3cqw}.demo-gradient-presets button[aria-pressed=true]{outline:1px solid var(--demo-ink);outline-offset:2px}.demo-gradient-presets button:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}@container (width<=520px){.demo-project-board{padding-top:2%}.demo-board-columns{margin-top:.5cqw}}.dark .neattake-editor-preview{--demo-lane-amber:#facc15;--demo-lane-sky:#7dd3fc;--demo-lane-violet:#c4b5fd}.demo-feature-lane{background:color-mix(in oklch, var(--demo-accent) 12%, transparent);color:var(--demo-accent)}.demo-lane-neutral{background:var(--demo-well);color:var(--demo-muted)}.demo-lane-amber{background:color-mix(in oklch, var(--demo-lane-amber) 12%, transparent);color:var(--demo-lane-amber)}.demo-lane-sky{background:color-mix(in oklch, var(--demo-lane-sky) 12%, transparent);color:var(--demo-lane-sky)}.demo-lane-violet{background:color-mix(in oklch, var(--demo-lane-violet) 12%, transparent);color:var(--demo-lane-violet)}.neattake-sample-pointer{color:color-mix(in srgb, var(--primary) 85%, transparent);fill:var(--background);stroke-width:2px}