@property --u{syntax:"<length>";inherits:true;initial-value:10px}.product-replay{container-type:inline-size;--sans:var(--font-product-sans),Arial,sans-serif;--serif:var(--font-product-serif),Georgia,serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}.product-replay .browser{--u:1em;position:relative;font-family:var(--sans);font-size:calc(100cqw / 64);line-height:1.3;font-feature-settings:"lnum";font-variant-numeric:lining-nums;color:#22262b;background:#fff;border:1px solid #d3c8b5;border-radius:.9em;overflow:hidden;box-shadow:0 1px 0 rgba(70,45,20,.06),0 2.4em 4.8em -2.6em rgba(70,45,20,.38)}.product-replay .browser-bar{display:flex;align-items:center;gap:1.2em;height:3em;padding:0 1.1em;background:#f1ece3;border-bottom:1px solid #e0d7c7}.product-replay .browser-dots{display:flex;gap:.45em}.product-replay .browser-dots i{width:.8em;height:.8em;border-radius:50%;background:#d8cebe}.product-replay .browser-url{flex:0 1 30em;height:1.95em;padding:0 .9em;border-radius:1em;background:#fff;font-family:var(--mono);font-size:1.05em;line-height:1.95em;color:#4d5157;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-replay .browser-ext{margin-left:auto;display:flex;align-items:center}.product-replay .browser-note{font-family:var(--serif);font-style:italic;font-size:1.15em;color:var(--accent-deep)}.product-replay .browser-body{position:relative;height:37em;overflow:hidden;background:#fff}.product-replay .a-chip{display:inline-flex;align-items:center;gap:.45em;padding:.3em .75em;border-radius:.4em;background:#fff;border:1px solid #e0d7c7;font-size:.95em;font-weight:600}.product-replay .a-chip .mark{width:1.2em;height:1.2em;color:var(--accent)}.product-replay .rec-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#d23b1b}.motion-ok .product-replay .rec-dot{animation:blink 1.4s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}.product-replay .harbor{--u:1em;position:relative;overflow:hidden;background:#fff;color:#22262b;font-family:var(--sans);line-height:1.25;text-align:left}.product-replay .h-side>*,.product-replay .harbor>*{position:absolute}.product-replay .h-side{left:0;top:0;bottom:0;width:calc(10 * var(--u));background:#f4f3ef;border-right:1px solid #e6e3dc}.product-replay .h-logo{display:flex;align-items:center;gap:.45em;font-weight:700;font-size:1.15em}.product-replay .h-logo i{width:1.05em;height:1.05em;border-radius:.28em;background:#2a5d74}.product-replay .h-nav{display:flex;align-items:center;gap:.6em;padding:0 .7em;border-radius:.4em;color:#4b5058}.product-replay .h-nav i{width:.85em;height:.85em;border-radius:.2em;border:1.5px solid;opacity:.6}.product-replay .h-nav[data-on]{background:#e3e8ea;color:#12364a;font-weight:600}.product-replay .h-title{font-size:1.85em;font-weight:700;letter-spacing:-.02em}.product-replay .h-sub{color:#6b7078}.product-replay .h-tab{display:flex;align-items:center;justify-content:center;color:#5b6068}.product-replay .h-tab[data-on]{color:#12364a;font-weight:600;box-shadow:inset 0 -.18em 0 #2a5d74}.product-replay .h-rule{height:1px;background:#e6e3dc}.product-replay .h-label{font-size:.9em;color:#6b7078}.product-replay .h-input{display:flex;align-items:center;padding:0 .8em;border:1px solid #d5d8dc;border-radius:.4em;background:#fff}.product-replay .h-input[data-focus]{border-color:#2a5d74;box-shadow:0 0 0 .2em rgba(42,93,116,.15)}.product-replay .h-placeholder{color:#5b6068}.product-replay .h-strong{font-weight:700;font-size:1.15em}.product-replay .h-strong small{margin-left:.4em;font-weight:400;font-size:.8em;color:#6b7078}.product-replay .h-btn{border-radius:.4em;background:#2a5d74;color:#fff;font-weight:600}.product-replay .h-btn,.product-replay .h-ghost{display:flex;align-items:center;justify-content:center}.product-replay .h-ghost{border:1px solid #d5d8dc;border-radius:.4em;color:#3b4047}.product-replay .h-row{display:grid;grid-template-columns:2.4em 9em 1fr auto;align-items:center;grid-gap:.8em;gap:.8em;border-bottom:1px solid #efede8}.product-replay .h-row i{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;font-style:normal;font-size:.8em;font-weight:700;color:#2f343a}.product-replay .h-row small{color:#6b7078}.product-replay .h-row em{font-style:normal;font-size:.9em;color:#6b7078}.product-replay .h-row[data-new]{background:#fbf7ee}.product-replay .h-card{display:grid;align-content:start;grid-gap:.6em;gap:.6em;padding:1em;border:1px solid #e6e3dc;border-radius:.5em}.product-replay .h-card i{display:block;height:.55em;border-radius:.3em;background:#ebe8e1}.product-replay .h-card small,.product-replay .h-card.plan small{color:#6b7078}.product-replay .h-card.plan .h-ghost{position:static;width:9em;height:2.4em}.product-replay .h-scrim{inset:0;background:rgba(26,30,36,.32)}.product-replay .h-dialog{background:#fff;border-radius:.7em;box-shadow:0 1em 3em rgba(0,0,0,.25)}.product-replay .h-toast{padding:.7em 1.1em;border-radius:.5em;background:#1f2a30;color:#fff;font-size:.95em}.product-replay .h-highlight{border:calc(.24 * var(--u)) solid var(--accent);border-radius:calc(.6 * var(--u));background:rgba(30,107,79,.06);box-shadow:0 0 0 calc(.35 * var(--u)) rgba(30,107,79,.14)}.product-replay .shot{position:relative;display:block;flex:none;overflow:hidden;border-radius:calc(.5 * var(--u));box-shadow:0 0 0 1px #e3ddd2}.product-replay .guide{position:absolute;inset:0;background:#fff}.product-replay .g-toc{position:absolute;left:0;top:0;bottom:0;width:calc(17 * var(--u));padding:calc(2.2 * var(--u)) calc(1.8 * var(--u));background:#fbf9f5;border-right:1px solid #ece6db;display:flex;flex-direction:column}.product-replay .g-crumb{font-size:.9em;color:#6b7078}.product-replay .g-title{margin-top:.5em;font-family:var(--serif);font-size:1.9em;line-height:1.08;font-weight:600;letter-spacing:-.015em}.product-replay .g-meta{margin-top:.7em;font-size:.95em;color:#6b7078}.product-replay .g-toc ol{margin:1.8em 0 0;padding:0;list-style:none;border-top:1px solid #ece6db}.product-replay .g-toc li{display:flex;gap:.7em;padding:.65em 0;border-bottom:1px solid #ece6db;font-size:.95em;color:#4b5058}.product-replay .g-toc li span{color:#9aa0a7}.product-replay .g-toc li[data-on]{color:#1a1f1b;font-weight:600}.product-replay .g-toc li[data-on] span{color:var(--accent)}.product-replay .g-foot{margin-top:auto;display:flex;align-items:center;gap:.4em;font-size:.85em;color:#5b6068}.product-replay .g-foot .mark{width:1em;height:1em;color:var(--accent)}.product-replay .g-steps{position:absolute;left:calc(17 * var(--u));right:0;top:0;bottom:0;overflow:hidden}.product-replay .g-track{position:absolute;inset:0;transition:transform .7s var(--ease)}.product-replay .g-step{position:absolute;left:calc(6 * var(--u));width:calc(35 * var(--u));display:flex;flex-direction:column;gap:calc(.5 * var(--u))}.product-replay .g-num{font-size:.85em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.product-replay .g-step-title{font-size:1.6em;font-weight:650;letter-spacing:-.015em;line-height:1.15}.product-replay .g-note{margin-bottom:calc(.3 * var(--u));font-size:1.05em;color:#4b5058}.product-replay .g-step .shot{margin-top:calc(.6 * var(--u))}.product-replay .panel{position:absolute;right:0;top:0;bottom:0;width:calc(18 * var(--u));padding:calc(1.2 * var(--u));background:#faf7f1;border-left:1px solid #e6dfd2}.product-replay .panel-head{display:flex;align-items:center;gap:.5em}.product-replay .panel-head .mark{width:1.3em;height:1.3em;color:var(--accent)}.product-replay .panel-head b{font-size:1.1em}.product-replay .panel-rec{margin-left:auto;display:flex;align-items:center;gap:.4em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#134a37}.product-replay .panel-hint{margin:calc(1 * var(--u)) 0 calc(.8 * var(--u));font-size:.95em}.product-replay .panel-steps{margin:0;padding:0;list-style:none}.product-replay .panel-steps li{display:flex;align-items:center;gap:.8em;height:0;opacity:0;overflow:hidden;transform:translateY(-.6em);transition:height .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}.product-replay .panel-steps li[data-on]{height:calc(4.25 * var(--u));opacity:1;transform:none}.product-replay .panel-steps li>span:last-child{display:grid;font-size:.95em;line-height:1.2}.product-replay .panel-steps small{font-size:.8em;color:#5b6068}.product-replay .panel-actions{position:absolute;left:calc(1.2 * var(--u));right:calc(1.2 * var(--u));bottom:calc(1.2 * var(--u));display:grid;grid-template-columns:1fr 1.6fr;grid-gap:.6em;gap:.6em}.product-replay .panel-actions span{display:grid;place-items:center;height:2.6em;border:1px solid #d9d0c0;border-radius:.4em;font-weight:600;background:#fff}.product-replay .panel-actions .primary{border-color:var(--ink);background:var(--ink);color:#fff}.product-replay .editor{position:absolute;inset:0;background:#fff}.product-replay .ed-bar{display:flex;align-items:center;gap:1em;height:calc(3.6 * var(--u));padding:0 calc(1.4 * var(--u));border-bottom:1px solid #ece6db;background:#fbf9f5}.product-replay .ed-title{font-weight:700;font-size:1.1em}.product-replay .ed-meta{color:#6b7078;font-size:.95em}.product-replay .ed-publish{margin-left:auto;width:calc(6 * var(--u));height:calc(2.3 * var(--u));display:grid;place-items:center;border-radius:.4em;background:var(--ink);color:#fff;font-weight:600;transition:background .2s var(--ease)}.product-replay .ed-publish[data-pressed]{background:var(--accent)}.product-replay .ed-list{position:absolute;left:0;top:calc(3.6 * var(--u));bottom:0;width:calc(20 * var(--u));margin:0;padding:calc(1 * var(--u)) 0 0;list-style:none;border-right:1px solid #ece6db}.product-replay .ed-list li{position:relative;display:flex;align-items:center;gap:.8em;height:calc(4.4 * var(--u));padding:0 calc(1 * var(--u));overflow:hidden;transition:height .4s var(--ease),opacity .3s var(--ease),background .2s var(--ease)}.product-replay .ed-list li[data-on]{background:rgba(30,107,79,.07);box-shadow:inset .22em 0 0 var(--accent)}.product-replay .ed-list li[data-gone]{height:0;opacity:0}.product-replay .ed-step{display:grid;min-width:0;font-size:.95em;line-height:1.2}.product-replay .ed-step small{font-size:.8em;color:#5b6068}.product-replay .ed-trash{margin-left:auto;padding:.25em .5em;border-radius:.3em;font-size:.8em;font-weight:600;color:#fff;background:#1e6b4f;opacity:0}.product-replay .ed-list li[data-doomed]{background:#fbefea}.product-replay .ed-list li[data-doomed] .ed-step{text-decoration:line-through;-webkit-text-decoration-color:rgba(30,107,79,.7);text-decoration-color:rgba(30,107,79,.7)}.product-replay .ed-list li[data-doomed] .ed-trash{opacity:1}.product-replay .ed-main{position:absolute;left:calc(21.5 * var(--u));right:calc(1.5 * var(--u));top:calc(4.8 * var(--u));display:flex;flex-direction:column}.product-replay .ed-kicker{height:calc(1.4 * var(--u));font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6068}.product-replay .ed-field{display:flex;align-items:center;padding:0 calc(.8 * var(--u));border:1px solid #e3ddd2;border-radius:.4em;white-space:nowrap;overflow:hidden}.product-replay .ed-field-title{margin-top:calc(.4 * var(--u));height:calc(2.6 * var(--u));font-size:1.25em;font-weight:650}.product-replay .ed-field-note{margin-top:calc(.5 * var(--u));height:calc(2.2 * var(--u));color:#4b5058}.product-replay .ed-shot{margin-top:calc(.9 * var(--u))}.product-replay .typed{display:inline-block;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}.motion-ok .product-replay .typed{animation:type 1.1s steps(var(--chars,30)) both}@keyframes type{0%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}.product-replay .ed-dialog{position:absolute;right:calc(1.2 * var(--u));top:calc(11.4 * var(--u));width:calc(21 * var(--u));height:calc(12.4 * var(--u));z-index:3;padding:calc(1.4 * var(--u));display:flex;flex-direction:column;gap:calc(.7 * var(--u));background:#fff;border:1px solid #e3ddd2;border-radius:.6em;box-shadow:0 1.2em 3em -.8em rgba(40,30,20,.35)}.product-replay .ed-dialog b{font-size:1.15em}.product-replay .ed-radio{display:flex;align-items:center;gap:.6em;color:#4b5058}.product-replay .ed-radio i{width:1em;height:1em;border-radius:50%;border:1.5px solid #b9b2a6}.product-replay .ed-radio[data-on] i{border:.32em solid var(--ink)}.product-replay .ed-link{padding:.6em .8em;border-radius:.4em;background:#f6f2ea;font-family:var(--mono);font-size:.95em}.product-replay .ed-dialog-btn{margin-top:auto;align-self:flex-end;padding:.6em 1.1em;border-radius:.4em;background:var(--ink);color:#fff;font-weight:600}.product-replay .ed-dialog-btn.done{background:#2f6b4a}.product-replay .demo-cursor{position:absolute;z-index:5;width:0;height:0;transition:left .42s var(--ease),top .42s var(--ease)}.product-replay .demo-frame[data-reduce] .demo-cursor{transition:none}.product-replay .cursor{position:absolute;max-width:none;left:-.1em;top:-.1em;width:1.5em;height:2em;filter:drop-shadow(0 .15em .2em rgba(0,0,0,.25))}.product-replay .browser{border:0;border-radius:0;box-shadow:none}.product-replay p{font:inherit;color:inherit}.product-replay .panel-hint{font-size:1.05em;color:#6b7078}.product-replay .cursor{pointer-events:none}@media (prefers-reduced-motion:reduce){.product-replay *,.product-replay :after,.product-replay :before{animation:none!important;transition:none!important}}.product-replay .scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}.product-replay .scene[data-on]{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}