body{--cf-bg:transparent;--cf-panel:var(--bg-surface);--cf-card:var(--card);--cf-border:var(--border);--cf-muted:var(--muted);--cf-text:var(--ink);--cf-accent:var(--accent);--cf-accent-2:#a855f7;--cf-positive:#22c55e;--cf-warning:var(--accent-yellow);--cf-danger:var(--danger);--cf-tooltip-bg:var(--bg-surface);--cf-tooltip-border:var(--border-strong)}.cf-tooltip{border-bottom:1px dotted var(--cf-accent);cursor:help;display:inline-block;position:relative}.cf-tooltip[data-tooltip]:hover:after,.cf-tooltip[data-tooltip]:focus:after{content:attr(data-tooltip);background:var(--cf-tooltip-bg);color:var(--cf-text);border:1px solid var(--cf-tooltip-border);white-space:nowrap;z-index:1000;pointer-events:none;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.4;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000080}.cf-tooltip[data-tooltip]:hover:before,.cf-tooltip[data-tooltip]:focus:before{content:"";border:6px solid #0000;border-top-color:var(--cf-tooltip-border);z-index:1000;pointer-events:none;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}.cf-shell{background:var(--cf-bg);color:var(--cf-text);box-shadow:none;border:none;gap:1.5rem;padding:0;display:grid}.playground-react-root{min-height:420px}.cf-shell__header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.cf-shell__eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--cf-muted);margin:0 0 .25rem;font-size:.78rem}.cf-shell__title{margin:0;font-size:1.6rem}.cf-shell__lede{color:var(--cf-muted);max-width:52ch;margin:.25rem 0 0}.cf-flow-hint{color:var(--cf-accent-2);background:#a855f71a;border-radius:.5rem;margin-top:.5rem;padding:.25rem .5rem;font-size:.9rem;animation:.3s ease-in fade-in;display:inline-block}@keyframes fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cf-shell__metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;min-width:18rem;display:grid}.cf-metric{background:var(--cf-card);border:1px solid var(--cf-border);text-align:right;border-radius:.75rem;gap:.25rem;padding:.75rem;display:grid}.cf-metric__label{color:var(--cf-muted);font-size:.85rem}.cf-metric__value{font-variant-numeric:tabular-nums;font-size:1.25rem}.cf-takeaway{background:var(--cf-panel);border:1px solid var(--cf-border);border-radius:1rem;gap:.6rem;padding:1rem 1.25rem;display:grid}.cf-takeaway__title{text-transform:uppercase;letter-spacing:.08em;color:var(--cf-muted);margin:0;font-size:.8rem}.cf-takeaway__list{gap:.45rem;margin:0;padding:0;list-style:none;display:grid}.cf-takeaway__item{color:var(--cf-text);border-left:3px solid var(--cf-border);padding-left:.85rem;font-size:.95rem;line-height:1.45}.cf-takeaway__item[data-tone=ok]{border-left-color:var(--sem-positive)}.cf-takeaway__item[data-tone=warn]{border-left-color:var(--sem-warning)}.cf-toolbar{background:var(--cf-panel);border:1px solid var(--cf-border);border-radius:1rem;gap:.75rem;padding:1rem;display:grid}.cf-toolbar__row{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;display:flex}.cf-field{color:var(--cf-muted);align-items:center;gap:.35rem;font-size:.95rem;display:inline-flex}.cf-field__label{color:var(--cf-text);font-weight:600}.cf-field__value{color:var(--cf-text);font-variant-numeric:tabular-nums}.cf-field input[type=range]{accent-color:var(--cf-accent)}.cf-field select,.cf-toolbar button,.cf-toolbar input[type=range]{background:var(--cf-card);color:var(--cf-text);border:1px solid var(--cf-border);border-radius:.5rem;padding:.4rem .75rem}.cf-field--toggle{background:var(--cf-card);border:1px solid var(--cf-border);border-radius:.75rem;gap:.4rem;padding:.35rem .65rem}.cf-field--search{flex:auto;min-width:200px;max-width:400px;position:relative}.cf-field--search input[type=text]{background:var(--cf-card);width:100%;color:var(--cf-text);border:1px solid var(--cf-border);border-radius:.5rem;padding:.4rem 2rem .4rem .75rem;font-size:.95rem}.cf-field--search input[type=text]::placeholder{color:var(--cf-muted)}.cf-field--search input[type=text]:focus{border-color:var(--cf-accent);outline:none;box-shadow:0 0 0 3px #38bdf81a}.cf-field__clear{color:var(--cf-muted);cursor:pointer;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;padding:.25rem;font-size:1.5rem;line-height:1;transition:all .2s;display:flex;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.cf-field__clear:hover{color:var(--cf-danger);background:#ef44441a}.cf-toolbar__actions{flex-wrap:wrap;gap:.5rem;display:flex}.cf-demo-scenarios{background:var(--cf-panel);border:1px solid var(--cf-border);border-radius:1rem;gap:.75rem;padding:1rem;display:grid}.cf-demo-scenarios__header{flex-direction:column;gap:.25rem;display:flex}.cf-demo-scenarios__title{color:var(--cf-text);margin:0;font-size:1.1rem}.cf-demo-scenarios__hint{color:var(--cf-muted);margin:0;font-size:.9rem}.cf-demo-scenarios__grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;display:grid}.cf-demo-card{background:var(--cf-card);border:1px solid var(--cf-border);cursor:pointer;text-align:center;border-radius:.75rem;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;transition:all .2s;display:flex}.cf-demo-card:hover{border-color:var(--cf-accent);background:#38bdf814;transform:translateY(-2px);box-shadow:0 4px 12px #38bdf826}.cf-demo-card__icon{font-size:2rem;line-height:1}.cf-demo-card__name{color:var(--cf-text);font-size:.9rem;font-weight:600}.cf-lanes{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;display:grid}.cf-lane{background:var(--cf-panel);border:1px solid var(--cf-border);border-radius:1rem;gap:.75rem;padding:1rem;display:grid}.cf-lane__header{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.cf-lane__eyebrow{color:var(--cf-muted);text-transform:uppercase;letter-spacing:.1em;margin:0;font-size:.75rem}.cf-lane__title{margin:.15rem 0 0;font-size:1.1rem}.cf-lane__meta{color:var(--cf-muted);flex-wrap:wrap;gap:.5rem;font-size:.9rem;display:flex}.cf-badge-lag{color:var(--cf-danger);background:#ef444426;border:1px solid #ef444466;border-radius:999px;align-items:center;gap:.3rem;padding:.2rem .6rem;font-size:.85rem;font-weight:600;display:inline-flex}.cf-badge-lag--low{color:var(--cf-positive);background:#22c55e26;border-color:#22c55e66}.cf-badge-lag--medium{color:var(--cf-warning);background:#f59e0b26;border-color:#f59e0b66}.cf-badge-backlog{color:var(--cf-accent-2);background:#a855f726;border:1px solid #a855f766;border-radius:999px;padding:.2rem .6rem;font-size:.85rem;font-weight:600}.cf-grid{flex-wrap:wrap;gap:.4rem;display:flex}.cf-chip{color:var(--cf-accent);background:#38bdf81a;border:1px solid #38bdf84d;border-radius:999px;padding:.25rem .6rem;font-size:.9rem}.cf-table{border:1px solid var(--cf-border);border-radius:.75rem;overflow:hidden}.cf-table__header{background:var(--cf-card);border-bottom:1px solid var(--cf-border);padding:.5rem .75rem;font-weight:600}.cf-table__body{gap:.35rem;padding:.5rem .75rem;display:grid}.cf-table__row{border:1px solid var(--cf-border);background:#ffffff05;border-radius:.5rem;grid-template-columns:.9fr 1fr 2fr;gap:.35rem;padding:.35rem .45rem;display:grid}.cf-table__row--nested{grid-template-columns:1fr 1fr}.cf-table__nested{grid-column:1/-1;gap:.35rem;display:grid}.cf-table__nested-row{border:1px dashed var(--cf-border);background:#ffffff05;border-radius:.35rem;grid-template-columns:1fr 2fr;gap:.35rem;padding:.3rem .4rem;display:grid}.cf-table__cell{font-weight:600}.cf-table__cell--muted{color:var(--cf-muted);font-weight:400}.cf-lane,.cf-table,.cf-table__row,.cf-table__nested-row,.cf-event-stack,.cf-event-card,.cf-event-card__body{min-width:0}.cf-table__cell,.cf-table__cell--muted,.cf-event-card__body{overflow-wrap:anywhere}.cf-event-stack{gap:.4rem;display:grid}.cf-event-stack--virtual{scrollbar-width:thin;scrollbar-color:var(--cf-accent) var(--cf-card)}.cf-event-stack--virtual::-webkit-scrollbar{width:8px}.cf-event-stack--virtual::-webkit-scrollbar-track{background:var(--cf-card);border-radius:4px}.cf-event-stack--virtual::-webkit-scrollbar-thumb{background:var(--cf-accent);border-radius:4px}.cf-event-stack--virtual::-webkit-scrollbar-thumb:hover{background:var(--cf-accent-2)}.cf-event-card{background:var(--cf-card);border:1px solid var(--cf-border);border-left:3px solid var(--cf-border);border-radius:.8rem;gap:.35rem;padding:.5rem .7rem;transition:all .2s;display:grid;position:relative}.cf-event-card:hover{border-left-color:var(--cf-accent);background:#38bdf80d;transform:translate(2px)}.cf-event-card--muted{opacity:.7}.cf-event-card--active{border-color:#22c55e99;border-left-color:var(--cf-positive);box-shadow:0 10px 30px #22c55e1a}.cf-event-card--highlighted{border-color:var(--cf-accent-2);border-left-color:var(--cf-accent-2);z-index:10;background:#a855f726;border-left-width:4px;animation:2s ease-in-out infinite pulse-highlight;transform:scale(1.02);box-shadow:0 0 20px #a855f766,0 0 40px #a855f733}@keyframes pulse-highlight{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733}50%{box-shadow:0 0 30px #a855f799,0 0 60px #a855f74d}}.cf-event-card__header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.cf-event-card__meta{color:var(--cf-muted);grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.35rem;font-size:.88rem;display:grid}.cf-event-card__meta dt{font-weight:600}.cf-event-card__meta dd{font-variant-numeric:tabular-nums;margin:0}.cf-event-card__body{justify-content:space-between;align-items:center;font-weight:600;display:flex}.cf-badge{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--cf-border);background:#ffffff0a;border-radius:.5rem;padding:.15rem .45rem;font-size:.75rem}.cf-badge--insert{color:var(--cf-positive);border-color:#22c55e66}.cf-badge--update{color:var(--cf-accent);border-color:#38bdf866}.cf-badge--delete{color:var(--cf-danger);border-color:#ef444466}.cf-badge--schema{color:var(--cf-warning);border-color:#f59e0b66}.cf-partitions{gap:.75rem;display:grid}.cf-partition{border:1px solid var(--cf-border);border-radius:.75rem;overflow:hidden}.cf-partition__header{background:#a855f71a;padding:.4rem .6rem;font-weight:600}.cf-partition__queue{gap:.5rem;padding:.5rem;display:grid}.cf-buffered{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.cf-subtitle{color:var(--cf-muted);margin:0 0 .35rem}.cf-empty{color:var(--cf-muted);margin:0;font-style:italic}.cf-transactions{background:var(--cf-panel);border:1px solid var(--cf-border);border-radius:1rem;gap:.75rem;padding:1rem;display:grid}.cf-transactions__header{justify-content:space-between;align-items:center;display:flex}.cf-transactions__hint{color:var(--cf-muted);max-width:70ch;margin:.35rem 0 0}.cf-clock{color:var(--cf-muted);font-variant-numeric:tabular-nums}.cf-transaction-list{gap:.5rem;display:grid}.cf-transaction{border:1px solid var(--cf-border);border-left:4px solid var(--cf-accent);background:var(--cf-card);border-radius:.75rem;gap:.45rem;padding:.6rem .75rem;transition:all .2s;display:grid;position:relative}.cf-transaction:hover{border-left-color:var(--cf-accent-2);background:#38bdf80d;transform:translate(2px)}.cf-transaction--complete{border-left-color:var(--cf-positive);background:#22c55e08}.cf-transaction--partial{border-left-color:var(--cf-warning)}.cf-transaction__meta{color:var(--cf-muted);flex-wrap:wrap;gap:.5rem;font-size:.95rem;display:flex}.cf-transaction__tx{color:var(--cf-text);background:#38bdf81a;border:1px solid #38bdf84d;border-radius:.35rem;padding:.15rem .4rem;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.9rem;font-weight:700}.cf-transaction__stages{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.35rem;display:grid}.cf-transaction__stage{border:1px solid var(--cf-border);background:#ffffff05;border-radius:.6rem;justify-content:space-between;padding:.35rem .5rem;display:flex}.cf-stage__label{color:var(--cf-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.cf-stage__value{font-variant-numeric:tabular-nums;font-weight:700}.cf-transaction__progress{background:#ffffff0f;border-radius:999px;height:8px;position:relative;overflow:hidden}.cf-progress{background:linear-gradient(90deg, var(--cf-accent), var(--cf-accent-2));transition:width .2s;position:absolute;inset:0}.cf-progress--buffered{background:#f59e0b80;height:100%;top:auto;bottom:0}@media (width<=1024px){.cf-shell__header{flex-direction:column}.cf-buffered{grid-template-columns:1fr}.cf-shell__metrics{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}}@media (prefers-reduced-motion:reduce){.cf-event-card--highlighted,.cf-flow-hint{animation:none}.cf-event-card,.cf-demo-card,.cf-transaction,.cf-field__clear,.cf-progress{transition:none}.cf-event-card:hover,.cf-demo-card:hover,.cf-transaction:hover{transform:none}}