.wb{--wb-rail-w:320px;--wb-h:clamp(380px,68vh,900px);--wb-h-sm:min(58vh,520px);--wb-page-max:620px;--wb-gap:var(--space-4);--wb-lanes:1;--wb-zoom:1;display:grid;grid-template-columns:minmax(0,1fr) var(--wb-rail-w);gap:var(--wb-gap);align-items:start}.wb__canvas{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);height:var(--wb-h);overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}.wb__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-block-end:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);color:var(--color-text-muted)}.wb__bar-label{font-weight:600;color:var(--color-text)}.wb__bar [data-wb-hint]{flex:1 1 12ch;min-width:0}.wb__bar-tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2)}.wb__bar-zoom{min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}.wb__scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--space-3);overflow-anchor:none}.wb__lanes{display:grid;grid-template-columns:repeat(var(--wb-lanes),minmax(0,1fr));gap:var(--space-3);align-items:start}.wb__lane{min-width:0;display:grid;gap:var(--space-2);align-content:start}.wb__lane-head{position:sticky;inset-block-start:calc(var(--space-3) * -1);z-index:1;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted)}.wb__lane-tag{display:grid;place-items:center;min-width:22px;height:22px;border-radius:var(--radius-sm);background:var(--color-brand);color:var(--color-on-brand);font-weight:800;font-style:normal}.wb__lane-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text);font-weight:600}.wb__pages{display:grid;gap:var(--space-3)}.wb__pages--stream{grid-template-columns:minmax(0,1fr);justify-items:center}.wb__pages--grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-2)}.wb__page{display:grid;gap:var(--space-1);justify-items:stretch;min-width:0}.wb__pages--stream .wb__page{width:min(100%,calc(var(--wb-page-max) * var(--wb-zoom)))}.wb__page-frame{display:block;position:relative;direction:ltr;line-height:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-sm)}.wb__page-frame > img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.wb__page-placeholder{display:grid;place-items:center;aspect-ratio:var(--wb-page-ratio,1 / 1.414);font-size:var(--text-lg);font-weight:800;line-height:normal;color:var(--color-text-faint);background:var(--color-bg-subtle)}.wb__overlay{display:block;position:absolute;inset:0;line-height:normal}.wb__page-caption{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}.wb__page-num{font-weight:700;font-variant-numeric:tabular-nums}.wb__page-note{margin-inline-start:auto;text-align:end}.wb__badge{border-radius:999px;padding:1px var(--space-2);font-size:var(--text-xs);font-weight:700;background:var(--color-info-bg);color:var(--color-info-text)}.wb__badge--add{background:var(--color-diff-add);color:var(--color-success-text)}.wb__badge--del{background:var(--color-diff-del);color:var(--color-error)}.wb__page-btn{display:block;padding:0;border:0;background:none;cursor:default;width:100%;min-width:0;border-radius:var(--radius-sm)}.wb--picking .wb__page-btn{cursor:pointer}.wb__page-btn:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}.wb__page-pick{display:none;align-items:center;gap:var(--space-1);padding:1px var(--space-2);border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700;cursor:pointer}.wb--picking .wb__page-pick{display:inline-flex}.wb__page-pick[aria-pressed="true"]{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-info-bg)}.wb__page-pick:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}.wb--picking .wb__page.is-picked .wb__page-frame{border-color:var(--color-brand);box-shadow:var(--shadow-focus)}.wb__page-tick{position:absolute;inset-block-start:var(--space-1);inset-inline-end:var(--space-1);display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--text-xs);font-weight:800;line-height:normal;opacity:0;transition:opacity .12s ease}.wb--picking .wb__page.is-picked .wb__page-tick{opacity:1}.wb__page.is-active .wb__page-frame{border-color:var(--color-brand-hover);outline:2px solid var(--color-brand);outline-offset:1px}.wb__rail{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:var(--wb-h);overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.wb__rail-head{padding:var(--space-3);border-block-end:1px solid var(--color-border);display:grid;gap:var(--space-1)}.wb__rail-title{margin:0;font-size:var(--text-base);font-weight:700;color:var(--color-text)}.wb__rail-summary{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}.wb__rail-body{overflow-y:auto;overscroll-behavior:contain;padding:var(--space-3);display:grid;gap:var(--space-3);align-content:start}.wb__rail-foot{padding:var(--space-3);border-block-start:1px solid var(--color-border);display:grid;gap:var(--space-2);background:var(--color-surface)}.wb__status{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}.wb__status.is-error{color:var(--color-error)}.wb.is-busy .wb__rail-body,.wb.is-busy .wb__scroll{opacity:.6;pointer-events:none}@media (max-width:1023px){.wb{grid-template-columns:minmax(0,1fr)}.wb__rail{order:-1;height:auto;grid-template-rows:auto auto auto}.wb__rail-body{overflow:visible;max-height:none}.wb__canvas{height:var(--wb-h-sm)}.wb__lanes{grid-template-columns:minmax(0,1fr)}}@media (max-width:400px){.wb{--wb-gap:var(--space-3);--wb-h-sm:min(52vh,420px)}.wb__scroll,.wb__rail-head,.wb__rail-body,.wb__rail-foot{padding:var(--space-2)}.wb__bar{padding:var(--space-2)}.wb__pages--grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--space-1)}.wb__pages--grid .wb__page-note{display:none}}.wb-rect{position:absolute;box-sizing:border-box;border:2px solid var(--color-brand);box-shadow:0 0 0 100vmax var(--color-scrim);cursor:move}.wb-rect__handle{position:absolute;width:20px;height:20px;margin:-10px;box-sizing:border-box;border-radius:3px;background:var(--color-surface);border:2px solid var(--color-brand)}.wb-rect__handle--nw{top:0;left:0;cursor:nwse-resize}.wb-rect__handle--n{top:0;left:50%;cursor:ns-resize}.wb-rect__handle--ne{top:0;left:100%;cursor:nesw-resize}.wb-rect__handle--e{top:50%;left:100%;cursor:ew-resize}.wb-rect__handle--se{top:100%;left:100%;cursor:nwse-resize}.wb-rect__handle--s{top:100%;left:50%;cursor:ns-resize}.wb-rect__handle--sw{top:100%;left:0;cursor:nesw-resize}.wb-rect__handle--w{top:50%;left:0;cursor:ew-resize}.wb__page.is-drawable .wb__page-frame{touch-action:none;cursor:crosshair}.wb__overlay [data-wb-ppp-text]{font-size:calc(var(--wb-ppp,1) * 1px * var(--wb-ppp-size,10))}