.cmp{--cmp-add: color-mix(in oklab, var(--accent) 14%, var(--paper));--cmp-add-strong: color-mix(in oklab, var(--accent) 32%, var(--paper));--cmp-del: color-mix(in oklab, var(--danger) 11%, var(--paper));--cmp-del-strong: color-mix(in oklab, var(--danger) 28%, var(--paper));--cmp-chg: color-mix(in oklab, var(--warn) 12%, var(--paper))}.cmp-pick{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:var(--space-4);padding:var(--space-6);background:var(--paper-2)}.cmp-slot{--drop-bg: var(--paper);min-height:15rem}.cmp-empty{display:grid;justify-items:center;gap:var(--space-2)}.cmp-doc{position:relative;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:var(--radius-md);background:var(--paper-2);color:var(--ink-3);font-size:var(--text-xl);transition:transform var(--dur-2) var(--ease-out)}.cmp-doc b{position:absolute;right:-.45rem;bottom:-.45rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:var(--text-xs);font-weight:600}.cmp-slot:is(:hover,:focus-within,.is-over) .cmp-empty .cmp-doc{transform:translateY(-3px)}.cmp-slot .drop-title{font-size:var(--text-xl);font-weight:500}.cmp-slot .drop-text{color:var(--ink-2);font-size:var(--text-sm)}.cmp-mid{display:grid;align-content:center;justify-items:center;gap:var(--space-3)}.cmp-dave .dave-face{display:block;width:4.5rem;height:4.5rem}.cmp-under{grid-column:1 / -1;max-width:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-5);margin:0;font-size:var(--text-xs);color:var(--ink-3)}.cmp-under .link-btn{font-size:var(--text-xs)}.cmp-file{display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:0;text-align:left}.cmp-file[hidden],.cmp-empty[hidden]{display:none}.cmp-file .cmp-doc{flex:none;width:2.5rem;height:2.5rem;font-size:var(--text-md);color:var(--accent);background:var(--accent-soft)}.cmp-file .cmp-doc b{width:1.25rem;height:1.25rem;font-size:.6875rem}.cmp-change{flex:none;padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);font-size:var(--text-sm);font-weight:500;color:var(--ink-2)}.cmp-slot.has-file:hover .cmp-change{color:var(--ink);border-color:var(--ink-3)}.cmp-slot.has-file{min-height:0;align-content:center;padding:var(--space-5) var(--space-5);border-style:solid}.cmp:not([data-state=empty]) .cmp-pick{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}.cmp:not([data-state=empty]) .cmp-slot{min-height:0;padding:var(--space-3)}.cmp:not([data-state=empty]) .cmp-dave,.cmp:not([data-state=empty]) .cmp-under{display:none}.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}.cmp-tools[hidden]{display:none}.cmp-tools .seg-toggle{flex:none}.cmp-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.cmp-group .label{margin:0;white-space:nowrap}.cmp-tools .select{min-width:10rem}.cmp-tools .select .control{min-height:var(--space-10)}.cmp-tools .check-chip{font-family:var(--font-text)}.cmp-end{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}.cmp-tol{display:flex;align-items:center;gap:var(--space-3);min-width:14rem;font-size:var(--text-sm);color:var(--ink-2)}.cmp-tol output{min-width:2ch;font-family:var(--font-mono);font-size:var(--text-xs)}.cmp-body{display:grid;gap:var(--space-4);padding:var(--space-5) var(--space-6) var(--space-6);min-width:0}.cmp-body[hidden]{display:none}.cmp-progress{max-width:30rem}.cmp-same{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-8) var(--space-4);text-align:center}.cmp-same[hidden]{display:none}.cmp-same .dave-face{width:4rem;height:4rem}.cmp-same .ws-note{max-width:36rem}.cmp-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.cmp-summary[hidden]{display:none}.cmp-stat{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--space-8);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);font-size:var(--text-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}button.cmp-stat{cursor:pointer;transition:background-color var(--dur-1) var(--ease-move),border-color var(--dur-1) var(--ease-move)}button.cmp-stat:hover{border-color:var(--ink-3);color:var(--ink)}button.cmp-stat[aria-pressed=true]{border-color:color-mix(in oklab,var(--ink) 40%,transparent);background:var(--paper-2);color:var(--ink)}.cmp-stat strong{font-weight:600;color:var(--ink)}.cmp-stat i{width:.625rem;height:.625rem;border-radius:3px;background:var(--paper-3)}.cmp-stat.k-add i{background:var(--accent)}.cmp-stat.k-del i{background:var(--danger)}.cmp-stat.k-chg i{background:var(--warn)}.cmp-stat.k-mov i{background:var(--ink-3)}.cmp-note{font-size:var(--text-sm);color:var(--ink-2)}.cmp-out{min-width:0}.cmp-out:empty{display:none}.cmp-more{justify-self:start;margin-top:var(--space-3)}.cmp-scroll{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);overscroll-behavior:contain}.is-fullscreen .cmp-scroll{max-height:none}.cmp-lines{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6}.cmp-lines col.n{width:3.5rem}.cmp-lines col.s{width:1.5rem}.cmp-lines td{padding:0 var(--space-2);vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}.cmp-lines td.n{color:var(--ink-3);text-align:right;user-select:none;border-right:1px solid var(--line);background:var(--paper-2);font-variant-numeric:tabular-nums}.cmp-lines td.s{color:var(--ink-3);text-align:center;user-select:none;padding:0}.cmp-lines.is-split td.t+td.n{border-left:1px solid var(--line)}.cmp-lines .r-del td.t.a,.cmp-lines .r-chg td.t.a,.cmp-lines.is-inline .r-del td.t{background:var(--cmp-del)}.cmp-lines .r-add td.t.b,.cmp-lines .r-chg td.t.b,.cmp-lines.is-inline .r-add td.t{background:var(--cmp-add)}.cmp-lines .r-del td.n.a,.cmp-lines.is-inline .r-del td.n{background:var(--cmp-del-strong);color:var(--ink-2)}.cmp-lines .r-add td.n.b,.cmp-lines.is-inline .r-add td.n{background:var(--cmp-add-strong);color:var(--ink-2)}.cmp-lines .r-del td.t.b,.cmp-lines .r-add td.t.a{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in oklab,var(--ink) 4%,transparent) 6px 7px)}.cmp-lines del,.cmp-lines ins{text-decoration:none;border-radius:2px}.cmp-lines del{background:var(--cmp-del-strong)}.cmp-lines ins{background:var(--cmp-add-strong)}.cmp-lines .r-fold td{padding:var(--space-1) var(--space-3);background:var(--paper-2);color:var(--ink-3);font-family:var(--font-text);text-align:center;border-block:1px solid var(--line)}.cmp-lines .r-fold button{padding:var(--space-1) var(--space-2);border:0;background:none;color:var(--accent);font:inherit;font-size:var(--text-xs);font-weight:500;cursor:pointer}.cmp-lines .r-fold button:hover{text-decoration:underline}.cmp-lines .r-page td{padding:var(--space-1) var(--space-3);background:var(--paper-3);color:var(--ink-2);font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase}.cmp-grid{border-collapse:separate;border-spacing:0;min-width:100%;font-size:var(--text-sm);font-variant-numeric:tabular-nums}.cmp-grid th,.cmp-grid td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap;max-width:22rem;overflow:hidden;text-overflow:ellipsis}.cmp-grid thead th{position:sticky;top:0;z-index:1;background:var(--paper-2);font-weight:600;font-size:var(--text-xs);color:var(--ink-2)}.cmp-grid thead th.is-key{color:var(--accent)}.cmp-grid thead th.is-key:before{content:"🔑︎";margin-right:var(--space-1);font-size:.85em}.cmp-grid thead th.c-new{background:var(--cmp-add)}.cmp-grid thead th.c-gone{background:var(--cmp-del)}.cmp-grid td.rn{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--text-xs)}.cmp-grid .r-add td{background:var(--cmp-add)}.cmp-grid .r-del td{background:var(--cmp-del);color:var(--ink-2)}.cmp-grid .r-del td:not(.st){text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--danger) 50%,transparent)}.cmp-grid td.ch{background:var(--cmp-chg);white-space:normal}.cmp-grid td.ch del{display:block;color:var(--ink-3);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--danger) 60%,transparent)}.cmp-grid td.ch ins{display:block;text-decoration:none;font-weight:500}.cmp-grid td.empty-v{color:var(--ink-3);font-style:italic}.cmp-tag{display:inline-flex;align-items:center;padding:1px var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;background:var(--paper-2);color:var(--ink-2)}.cmp-tag.k-add{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--accent)}.cmp-tag.k-del{background:color-mix(in oklab,var(--danger) 14%,transparent);color:var(--danger)}.cmp-tag.k-chg{background:color-mix(in oklab,var(--warn) 18%,transparent);color:var(--warn-ink)}.cmp-grid td.st{position:sticky;left:0;background:var(--paper)}.cmp-pics{display:grid;gap:var(--space-3)}.cmp-stage{position:relative;display:grid;justify-items:center;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2) repeating-conic-gradient(color-mix(in oklab,var(--ink) 5%,transparent) 0 25%,transparent 0 50%) 0 0 / 16px 16px;overflow:hidden}.cmp-frame{position:relative;max-width:100%;line-height:0;touch-action:pan-y}.cmp-frame .stage-tag{line-height:1.5;z-index:2}.cmp-frame .split-handle{z-index:2}.cmp-frame canvas{display:block;max-width:100%;max-height:68vh;width:auto;height:auto;box-shadow:var(--shadow-sm)}.cmp-frame .cmp-over{position:absolute;inset:0;width:100%;height:100%;max-height:none;clip-path:inset(0 0 0 var(--split));box-shadow:none}.cmp-frame.is-wipe{cursor:ew-resize}.cmp-frame .split-handle{--split: inherit}.cmp-frame .stage-tag.a{left:var(--space-3)}.cmp-frame .stage-tag.b{right:var(--space-3)}.cmp-box{position:absolute;z-index:1;border:2px solid var(--danger);border-radius:3px;box-shadow:0 0 0 1px #fff9;pointer-events:none}.cmp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.cmp-two .cmp-stage{padding:var(--space-3)}.cmp-grid td.path{white-space:normal;overflow-wrap:anywhere;max-width:32rem;font-family:var(--font-mono);font-size:var(--text-xs)}.cmp-grid td.path small{display:block;color:var(--ink-3)}.cmp-grid td.act{width:1%}.cmp-back{justify-self:start}.cmp-bytes{display:grid;gap:var(--space-1);margin:0;font-size:var(--text-sm)}.cmp-bytes div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}.cmp-bytes dt{color:var(--ink-3)}.cmp-bytes dd{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);overflow-wrap:anywhere}@media(max-width:760px){.cmp-pick{grid-template-columns:minmax(0,1fr);padding:var(--space-4);gap:var(--space-3)}.cmp-slot{min-height:10rem}.cmp-mid{grid-auto-flow:column;justify-content:center}.cmp-dave .dave-face{width:3rem;height:3rem}.cmp:not([data-state=empty]) .cmp-pick{padding:var(--space-3) var(--space-4)}.cmp:not([data-state=empty]) .cmp-mid{justify-content:end;margin-block:calc(-1 * var(--space-2))}.cmp-tools{padding:var(--space-3) var(--space-4)}.cmp-body{padding:var(--space-4)}.cmp-end{margin-left:0}.cmp-tol{min-width:0;flex:1 1 100%}.cmp-two{grid-template-columns:minmax(0,1fr)}.cmp-lines col.n{width:2.5rem}.cmp-lines col.s{width:1.25rem}.cmp-tools .select{min-width:0;flex:1}.cmp-group{flex:1 1 100%}}.cmp-tools-inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-bottom:var(--space-3)}.cmp-tools .link-btn{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm)}.cmp-summary .cmp-end .btn{min-height:var(--space-8)}
