.recorded-playback{--pb-ink:var(--ink,#17221b);--pb-line:var(--line,#d9ded9);border:1px solid var(--pb-line);background:var(--paper,#fafbf8);color:var(--pb-ink)}
.playback-head,.playback-event,.playback-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--pb-line)}
.playback-head>div:first-child{display:grid;gap:4px}.playback-kicker,.playback-event>span,.playback-note{font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.09em;color:var(--muted,#68736b)}
.playback-readout{display:flex;gap:16px;font:12px/1.4 ui-monospace,monospace}.playback-readout span+span{padding-left:16px;border-left:1px solid var(--pb-line)}
.playback-event{min-height:54px}.playback-event p{flex:1;margin:0;font:13px/1.45 ui-monospace,monospace}.playback-event button,.playback-controls button{border:1px solid var(--pb-line);background:transparent;color:inherit;padding:8px 11px;cursor:pointer}
.playback-tree{height:400px;overflow:auto;padding:10px;background:linear-gradient(#fafbf8ee,#fafbf8ee),linear-gradient(90deg,#e7ebe7 1px,transparent 1px);background-size:auto,32px 32px}.playback-tree-canvas{position:relative;min-width:100%;min-height:100%}.playback-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.playback-connectors path{fill:none;stroke:#c7cec8;stroke-width:1.5}.playback-connectors path[hidden]{display:none}
.playback-node{position:absolute;box-sizing:border-box;width:110px;height:76px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:7px;padding:7px;text-align:left;border:1px solid var(--pb-line);border-top:3px solid #aeb8b0;background:#fff;color:inherit;font:500 11px/1.15 ui-monospace,monospace;cursor:pointer;overflow:hidden;z-index:1}.playback-node.no-render-slot{grid-template-columns:minmax(0,1fr)}.playback-node[hidden]{display:none}.playback-node-body{display:grid;min-width:0;gap:5px}.playback-node-label{display:flex;align-items:flex-start;gap:5px;min-width:0;overflow-wrap:anywhere;word-break:break-word}.playback-node small{display:block;min-width:0;color:var(--muted,#68736b);font:9px/1.2 ui-monospace,monospace;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}.playback-dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;margin-top:2px;border-radius:50%;background:#aeb8b0}.playback-node.is-active{border-top-color:#22784a}.playback-node.is-active .playback-dot{background:#22784a}.playback-node.is-integrating{border:2px solid #22784a;border-top-width:4px;box-shadow:0 0 0 3px #dceade}.playback-node.is-integrating .playback-dot{background:#22784a;box-shadow:0 0 0 3px #dceade}.playback-node.is-delivered{border-top-color:#75a789}.playback-node.is-incomplete{border-top-color:#b76b61}.playback-render{width:36px;height:30px;overflow:hidden;background:#eef1ed}.playback-render img{display:block;width:100%;height:100%;object-fit:cover}
.playback-track{position:relative;margin:20px 20px 4px}.playback-track input{width:100%;accent-color:#22784a}.playback-track [data-role=ticks]{position:absolute;left:7px;right:7px;top:4px;height:8px;pointer-events:none}.playback-track i{position:absolute;width:1px;height:4px;background:#aeb8b0}.playback-track i.is-delivery{height:8px;background:#22784a}
.playback-controls{border:0}.playback-controls>div{display:flex;gap:8px}.playback-controls .playback-primary{background:#22784a;color:white;border-color:#22784a;min-width:80px}.playback-controls label{display:flex;align-items:center;gap:8px;font:11px/1 ui-monospace,monospace}.playback-controls input{width:110px;accent-color:#22784a}.playback-note{margin:0;padding:0 20px 16px;font-weight:400;letter-spacing:.02em}
@media(max-width:700px){.playback-head,.playback-event,.playback-controls{align-items:flex-start;flex-wrap:wrap;padding:13px}.playback-event p{flex-basis:70%}.playback-tree{height:380px;padding:8px}.playback-controls>div{width:100%}.playback-controls button{flex:1}.playback-note{padding:0 13px 13px}}
.playback-node{width:120px;padding:5px;font-size:10.5px;line-height:1.05}.playback-node:not(.has-render){grid-template-columns:minmax(0,1fr)}.playback-node-body{gap:2px}.playback-node small{font-size:8px;line-height:1}