.record-demo-bubble{position:fixed;left:16px;bottom:20px;width:320px;z-index:500;padding:10px;display:none;transition:opacity .2s ease}.record-demo-bubble.is-overlapping-content{opacity:0;pointer-events:none}.record-demo-bubble.is-visible{display:block}.record-demo-bubble-close{position:absolute;top:-10px;right:-10px;width:24px;height:24px;line-height:1;border:2px solid var(--ribbon-dark);border-radius:4px;background:var(--paper);color:var(--ribbon-dark);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}.record-demo-status{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:10px 14px;flex-shrink:0}.record-demo-status-dot{flex:0 0 auto;width:9px;height:9px;border-radius:2px;background:var(--ribbon);display:inline-flex;align-items:center;justify-content:center;animation:recordDemoPulse 1.2s ease-in-out infinite}@keyframes recordDemoPulse{0%,to{opacity:1}50%{opacity:.3}}.record-demo-status-label{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-demo-status-timer{flex:0 0 auto;margin-left:auto;font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ink)}.record-demo-frame{position:relative;width:300px;height:322px;border:2px solid var(--ribbon-dark);border-radius:var(--radius);background:var(--paper);box-shadow:6px 6px 0 var(--ribbon-dark);box-sizing:border-box;overflow:hidden}.record-demo-frame-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px;height:100%;padding:14px;box-sizing:border-box;overflow:hidden}.record-demo-steps{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-shrink:0;padding:0 2px}.record-demo-step{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--font-mono);font-size:.58rem;line-height:1.2;color:var(--ink-soft);opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:2px solid transparent;padding-bottom:3px}.record-demo-step.is-current{color:var(--ribbon-dark);font-weight:700;opacity:1;border-bottom-color:var(--ribbon-dark)}.record-demo-status-dot.is-done{animation:none;opacity:1}.record-demo-scene-host{flex:1;display:grid;min-height:0}.record-demo-scene{grid-column:1;grid-row:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;width:100%;text-align:center}.record-demo-scene.is-active{display:flex}.record-demo-scene[data-scene=record]{align-items:stretch;justify-content:flex-start;text-align:left}.record-demo-card{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;width:100%}.record-demo-card.is-visible{opacity:1;transform:none}.record-demo-bubble .slack-demo-preview-caption{text-align:center}.record-demo-card .slack-demo-card-play,.record-demo-card .slack-demo-card-progress-fill{border-radius:3px}.record-demo-card .slack-demo-card-duration{border-radius:3px;background:var(--ribbon-dark)}.record-demo-card .slack-demo-card-media{border-radius:3px}.record-demo-flow-step{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}.record-demo-flow-step.is-visible{display:flex}.record-demo-provider-row{display:flex;align-items:center;justify-content:center;gap:10px}.record-demo-provider-btn{width:30px;height:30px;flex:0 0 auto;border-radius:3px;border:2px solid var(--ink);background:var(--paper-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.78rem;color:var(--ink)}.record-demo-provider-caption{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft)}.record-demo-sync-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;border:2px solid var(--ink);border-radius:8px;padding:8px 12px;background:var(--paper-dim);box-sizing:border-box}.record-demo-sync-icon{flex:0 0 auto;width:20px;height:20px;border-radius:3px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.66rem;font-weight:700}.record-demo-sync-name{flex:1 1 auto;min-width:0;text-align:left;font-weight:700;font-size:.76rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-demo-sync-status{flex:0 0 auto;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-soft);text-align:right}.record-demo-sync-status.is-connected{color:var(--ribbon-dark);font-weight:700}.record-demo-sync-status.is-syncing{color:var(--ink);font-weight:700}.record-demo-gallery{position:relative;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,44px);gap:6px;width:100%;flex-shrink:0}.record-demo-thumb{border:2px solid var(--ink);border-radius:5px;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color .25s ease,background .25s ease}.record-demo-select-rect{position:absolute;left:0;top:0;width:0;height:0;border:2px dashed var(--ribbon-dark);border-radius:4px;background:#b2222214;opacity:0;pointer-events:none;box-sizing:border-box;transition:opacity .25s ease,width .3s ease,height .3s ease}.record-demo-gallery.is-step-2 .record-demo-select-rect,.record-demo-gallery.is-step-3 .record-demo-select-rect{opacity:1;width:100%;height:44px}.record-demo-gallery.is-step-3 [data-thumb="1"],.record-demo-gallery.is-step-3 [data-thumb="2"]{border-color:var(--ribbon-dark);background:var(--paper)}.record-demo-gallery-toolbar{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap;flex-shrink:0;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}.record-demo-scene[data-scene=gallery].is-step-3 .record-demo-gallery-toolbar{opacity:1;transform:none}.record-demo-gallery-count{flex:0 0 auto;font-family:var(--font-mono);font-size:.58rem;color:var(--ink-soft);white-space:nowrap}.record-demo-pill{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:999px;padding:3px 7px;font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--ink);background:var(--paper);white-space:nowrap}.record-demo-pill-save{border-color:var(--ribbon-dark);color:var(--paper);background:var(--ribbon)}.record-demo-format-menu{flex-shrink:0;font-family:var(--font-mono);font-size:.6rem;color:var(--ink-soft);opacity:0;transition:opacity .3s ease}.record-demo-scene[data-scene=gallery].is-step-3 .record-demo-format-menu{opacity:1}.record-demo-branding-row{display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .3s ease}.record-demo-scene[data-scene=branding].is-step-2 .record-demo-branding-row{opacity:1}.record-demo-branding-logo{flex:0 0 auto;width:26px;height:26px;border-radius:4px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.74rem}.record-demo-branding-swatch{flex:0 0 auto;width:22px;height:22px;border-radius:4px;border:2px solid var(--ink);background:var(--ribbon)}.record-demo-branding-caption{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-soft)}.record-demo-slack-note{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);opacity:0;transition:opacity .3s ease}.record-demo-slack-note.is-visible{opacity:1}.record-demo-share-row{display:flex;align-items:center;justify-content:center;gap:8px}.record-demo-share-link{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft);border:1px solid var(--ink);border-radius:4px;padding:3px 8px;background:var(--paper)}#recordDemoShareCopied{opacity:0;transition:opacity .3s ease}#recordDemoShareCopied.is-visible{opacity:1}.dev-demo-reveal-row{display:flex;align-items:center;gap:8px;margin-top:8px;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}.dev-demo-reveal-row.is-visible{opacity:1;transform:translateY(0)}.record-demo-watch-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.record-demo-watch-btn svg{flex:0 0 auto;display:block}.record-demo-watch-btn-standalone{position:fixed;right:24px;bottom:24px;z-index:59;margin:0}.record-demo-progress{display:block;height:6px;border-radius:999px;border:1px solid var(--ink);background:var(--paper-dim);overflow:hidden;box-sizing:border-box}.record-demo-progress-fill{display:block;height:100%;background:var(--ribbon-dark);transition:width .3s ease}.rd-fade-in{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}.rd-fade-in.is-in{opacity:1;transform:none}.dr-demo-mute-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}.dr-demo-mute-btn.is-muted{color:var(--ink-soft)}.record-demo-flowdots{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;flex-shrink:0;padding:0 2px}.record-demo-flowdot{width:6px;height:6px;border-radius:999px;background:var(--ink);opacity:.25;border:none;padding:0;cursor:pointer;flex:0 0 auto}.record-demo-flowdot.is-current{opacity:1;background:var(--ribbon-dark);width:14px;border-radius:3px}.record-demo-requires{font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--ribbon-dark);border:1px solid var(--ribbon-dark);border-radius:4px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px;background:var(--paper)}.record-demo-search-bar{display:flex;align-items:center;gap:6px;width:100%;border:2px solid var(--ink);border-radius:999px;padding:5px 10px;background:var(--paper-dim);box-sizing:border-box;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft)}.record-demo-search-bar .cursor-blink{display:inline-block;width:1px;height:11px;background:var(--ink);animation:recordDemoPulse 1s step-end infinite}.record-demo-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:2px solid var(--ink);border-radius:8px;padding:8px 12px;background:var(--paper-dim);box-sizing:border-box}.record-demo-toggle-name{font-weight:700;font-size:.74rem;color:var(--ink)}.record-demo-switch{width:30px;height:16px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);position:relative;flex:0 0 auto}.record-demo-switch-knob{position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:999px;background:var(--ink);transition:left .25s ease}.record-demo-switch.is-on{background:var(--ribbon)}.record-demo-switch.is-on .record-demo-switch-knob{left:15px;background:var(--paper)}.record-demo-comment-row{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:2px solid var(--ink);border-radius:8px;padding:8px 10px;background:var(--paper-dim);box-sizing:border-box;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}.record-demo-comment-row.is-visible{opacity:1;transform:none}.record-demo-comment-avatar{flex:0 0 auto;width:20px;height:20px;border-radius:4px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;font-weight:700}.record-demo-comment-body{flex:1 1 auto;min-width:0}.record-demo-comment-name{font-family:var(--font-mono);font-size:.62rem;font-weight:700;color:var(--ink)}.record-demo-comment-text{font-size:.7rem;color:var(--ink-soft)}.record-demo-checkgrid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,44px);gap:6px;width:100%;flex-shrink:0}.record-demo-checkthumb{position:relative;border:2px solid var(--ink);border-radius:5px;background:var(--paper-dim);box-sizing:border-box;transition:border-color .25s ease,background .25s ease}.record-demo-checkthumb.is-checked{border-color:var(--ribbon-dark);background:var(--paper)}.record-demo-checkbox{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:3px;border:2px solid var(--ink);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--paper)}.record-demo-checkthumb.is-checked .record-demo-checkbox{background:var(--ribbon-dark);border-color:var(--ribbon-dark);color:var(--paper)}@media (max-width: 560px){.record-demo-bubble{left:12px;bottom:auto;top:12px;width:min(320px,calc(100vw - 24px))}.record-demo-frame{width:100%}.record-demo-watch-btn-standalone{right:14px;bottom:14px}}