:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bb-surface-ground);color:var(--bb-text);font-family:var(--bb-font-sans);font-size:var(--bb-font-body)}
button,a,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit}button:disabled{cursor:default}
:where(button,a,select,[tabindex]):focus-visible{outline:none;box-shadow:var(--bb-shadow-focus)}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;top:0;left:-9999px;z-index:20;padding:var(--bb-space-15);background:var(--bb-surface)}.skip:focus{left:var(--bb-space-15)}
.mast{background:var(--bb-surface);border-bottom:1px solid var(--bb-border-subdued)}
.mast-inner,.intro-inner,.workspace,.footer{width:min(100% - var(--bb-space-8),1664px);margin:0 auto}
.mast-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:var(--bb-space-15);text-decoration:none;font-family:var(--bb-font-mono);font-size:var(--bb-font-eyebrow);font-weight:var(--bb-weight-bold);letter-spacing:var(--bb-tracking-eyebrow)}
.mark{width:30px;height:30px;background:var(--bb-color-red);border-radius:var(--bb-radius-none);display:flex;align-items:flex-end;justify-content:center;gap:var(--bb-space-025);padding-bottom:var(--bb-space-1)}
.mark i{width:3px;background:var(--bb-color-white);height:7px}.mark i:nth-child(2){height:14px}.mark i:nth-child(3){height:11px}
.intro{background:var(--bb-surface);border-bottom:1px solid var(--bb-border-subdued)}
.intro-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.75fr);gap:var(--bb-space-6);align-items:end;padding:var(--bb-space-5) 0 var(--bb-space-4)}
.intro h1{font-size:var(--bb-font-display);margin:var(--bb-space-05) 0 0}
.intro-side>p{margin:0 0 var(--bb-space-1);max-width:490px;color:var(--bb-text-secondary);line-height:var(--bb-leading-snug);font-size:var(--bb-font-body-sm)}
.intro-meta{display:flex;flex-wrap:wrap;gap:var(--bb-space-1) var(--bb-space-15);font-family:var(--bb-font-mono);font-size:var(--bb-font-mono-sm);font-weight:var(--bb-weight-semibold);color:var(--bb-text-secondary)}
.intro-meta span+span:before{content:"/";color:var(--bb-color-red);margin-right:var(--bb-space-15)}
.workspace{display:grid;grid-template-columns:218px minmax(0,1fr);gap:var(--bb-space-4);padding:var(--bb-space-3) 0 var(--bb-space-4);align-items:start}
.sidebar{position:sticky;top:var(--bb-space-15);max-height:calc(100vh - var(--bb-space-3));overflow:auto;scrollbar-width:thin;padding:var(--bb-space-15);background:var(--bb-surface);border:1px solid var(--bb-border-subdued)}
.sidebar-title{font-weight:var(--bb-weight-bold);margin:var(--bb-space-05) var(--bb-space-05) var(--bb-space-2)}
.category-section{margin:0 0 var(--bb-space-15)}.category-section:last-child{margin-bottom:0}
.category-section p{font-family:var(--bb-font-mono);font-size:var(--bb-font-mono-sm);letter-spacing:var(--bb-tracking-eyebrow);text-transform:uppercase;font-weight:var(--bb-weight-bold);color:var(--bb-text-secondary);margin:0 0 var(--bb-space-05) var(--bb-space-1)}
.cat{display:flex;justify-content:space-between;width:100%;min-height:34px;white-space:normal;line-height:1.24;font-size:var(--bb-font-body-sm);padding:var(--bb-space-05) var(--bb-space-1)}
.cat-count{min-width:23px}.mobile-label,#category-mobile{display:none}
.board-heading{margin:0 0 var(--bb-space-2)}.board h2{margin:var(--bb-space-05) 0;font-size:var(--bb-font-h2);font-weight:var(--bb-weight-bold);line-height:var(--bb-leading-heading);letter-spacing:var(--bb-tracking-tight)}
.category-description{color:var(--bb-text-secondary);font-size:var(--bb-font-body-sm);margin:0;line-height:var(--bb-leading-snug)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--bb-space-1);padding:0 0 var(--bb-space-15);border-bottom:1px solid var(--bb-border-subdued)}
.segments .bb-segmented__item{min-height:var(--bb-control-height-sm);padding-inline:var(--bb-space-15)}
.toolbar-right,.arrows{display:flex;align-items:center;gap:var(--bb-space-05)}.tool{padding-inline:var(--bb-space-15)}.tool svg{width:16px;height:16px}.tool.view-btn{padding:0}.tool[aria-pressed=true]{border-color:var(--bb-color-red);color:var(--bb-color-red-deep)}
.compare-summary{display:flex;justify-content:space-between;align-items:center;margin:var(--bb-space-1) 0;color:var(--bb-text-secondary);font:var(--bb-weight-medium) var(--bb-font-mono-sm) var(--bb-font-mono)}
.icon-button{font-size:1.1rem}.icon-button:disabled{cursor:default}.icon-button.close{font-size:1.35rem}
.lane{display:flex;gap:var(--bb-space-15);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-color:var(--bb-ink-35) var(--bb-surface-sunken);scrollbar-width:thin;padding:var(--bb-space-025) 0 var(--bb-space-15);--card-width:clamp(260px,27vw,405px)}
.card{flex:0 0 var(--card-width);min-width:0;scroll-snap-align:start;border-color:var(--bb-border-subdued);overflow:hidden;display:flex;flex-direction:column}
.card.is-anchor{position:sticky;left:0;z-index:2;border-color:var(--bb-color-red);box-shadow:4px 0 0 var(--bb-surface-ground)}
.card-head{display:flex;gap:var(--bb-space-1);align-items:center;min-height:64px;padding:var(--bb-space-15)}
.brand-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border:1px solid var(--bb-border-subdued);border-radius:var(--bb-radius-input);font-family:var(--bb-font-mono);font-weight:var(--bb-weight-semibold);font-size:var(--bb-font-mono-sm);background:var(--bb-surface-ground)}
.is-anchor .brand-icon{border-color:var(--bb-color-red);background:var(--bb-color-red);color:var(--bb-color-white)}
.card-titles{min-width:0;flex:1}.card-title{margin:0 0 var(--bb-space-025);font-size:var(--bb-font-body);line-height:1.2;font-weight:var(--bb-weight-bold)}
.card-product{color:var(--bb-text-secondary);font-size:var(--bb-font-mono-sm);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anchor-label{color:var(--bb-color-red-deep);font:var(--bb-weight-semibold) var(--bb-font-mono-sm) var(--bb-font-mono)}
.shot{display:block;text-align:left;position:relative;overflow:hidden;width:100%;height:clamp(210px,23vw,335px);border:0;border-block:1px solid var(--bb-border-subdued);background:var(--bb-surface-sunken);padding:0;isolation:isolate}
.shot>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.shot.full{height:auto;aspect-ratio:1.49}.shot.full>img{height:auto;object-position:top}
.shot.missing{cursor:default;display:grid;place-items:center;padding:var(--bb-space-3);text-align:center;color:var(--bb-text-secondary);font-size:var(--bb-font-body-sm);line-height:var(--bb-leading-snug)}
.zoom-chip{position:absolute;z-index:1;bottom:var(--bb-space-1);right:var(--bb-space-1);border:1px solid var(--bb-border);background:var(--bb-surface);color:var(--bb-text);font-size:var(--bb-font-mono-sm);font-weight:var(--bb-weight-bold);border-radius:var(--bb-radius-button-ui);padding:var(--bb-space-1) var(--bb-space-15);box-shadow:var(--bb-shadow-card)}
.shot:hover .zoom-chip,.zoom-chip:hover{border-color:var(--bb-color-red);color:var(--bb-color-red-deep)}
.shot.context{cursor:grab;touch-action:pan-y;user-select:none}.shot.context.dragging{cursor:grabbing}
.context-stage{position:absolute;top:0;left:0;pointer-events:none;will-change:transform;background:var(--bb-surface)}
.context-stage img{display:block;width:100%;height:auto}
.preview-tools{position:absolute;z-index:1;left:var(--bb-space-1);bottom:var(--bb-space-1);display:flex;gap:var(--bb-space-025)}
.preview-tools button{height:var(--bb-control-height-xs);min-width:var(--bb-control-height-xs);background:var(--bb-surface);border:1px solid var(--bb-border);border-radius:var(--bb-radius-input);font-weight:var(--bb-weight-bold);line-height:1;padding:0 var(--bb-space-05)}
.preview-tools button:hover{border-color:var(--bb-color-red);color:var(--bb-color-red-deep)}
.context-label{position:absolute;z-index:1;left:var(--bb-space-1);top:var(--bb-space-1);background:var(--bb-surface);color:var(--bb-text-secondary);padding:var(--bb-space-05) var(--bb-space-1);font:var(--bb-weight-medium) var(--bb-font-mono-sm) var(--bb-font-mono);border-radius:var(--bb-radius-input);box-shadow:var(--bb-shadow-card);pointer-events:none}
.card-foot{min-height:52px;padding:var(--bb-space-1) var(--bb-space-15);display:flex;justify-content:space-between;gap:var(--bb-space-1);align-items:center;font-size:var(--bb-font-mono-sm);color:var(--bb-text-secondary);line-height:1.35}
.card-foot a,.pane-header a{white-space:nowrap;text-underline-offset:3px;font-weight:var(--bb-weight-semibold);color:var(--bb-text)}
.card-foot a:hover,.pane-header a:hover{color:var(--bb-color-red-deep)}
.lane.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));overflow:visible}.lane.grid .card{position:static}.lane.grid .shot:not(.full){height:260px}.lane.grid .card.is-anchor{box-shadow:none}
.capture-hint{color:var(--bb-text-secondary);font-size:var(--bb-font-body-sm);line-height:var(--bb-leading-snug);margin:var(--bb-space-1) 0 0}
.footer{display:flex;justify-content:space-between;gap:var(--bb-space-2);border-top:1px solid var(--bb-border-subdued);padding:var(--bb-space-2) 0 var(--bb-space-3);color:var(--bb-text-secondary);font:var(--bb-weight-medium) var(--bb-font-mono-sm) var(--bb-font-mono)}
.modal{border:1px solid var(--bb-border);border-radius:var(--bb-radius-card);background:var(--bb-surface-ground);color:var(--bb-text);padding:0;box-shadow:var(--bb-shadow-overlay);max-width:calc(100vw - var(--bb-space-3));max-height:calc(100dvh - var(--bb-space-3));overflow:auto}
.modal::backdrop{background:var(--bb-scrim)}.viewer{width:min(1510px,calc(100vw - var(--bb-space-4)));overflow:hidden}
.dialog-header{display:flex;justify-content:space-between;gap:var(--bb-space-15);align-items:center;background:var(--bb-surface);border-bottom:1px solid var(--bb-border-subdued);padding:var(--bb-space-15) var(--bb-space-2)}
.dialog-header h2{margin:var(--bb-space-025) 0 0;font-size:var(--bb-font-h3);letter-spacing:var(--bb-tracking-tight)}
.viewer-options{display:flex;flex-wrap:wrap;gap:var(--bb-space-1);align-items:center;justify-content:space-between;padding:var(--bb-space-1) var(--bb-space-15);border-bottom:1px solid var(--bb-border-subdued);font-size:var(--bb-font-body-sm);color:var(--bb-text-secondary)}
.viewer-options label{display:flex;align-items:center;gap:var(--bb-space-05)}
.viewer-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--bb-border-subdued);height:min(74dvh,950px)}.viewer-panes.single{grid-template-columns:minmax(0,1fr)}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bb-surface)}.pane-header{display:flex;justify-content:space-between;align-items:center;gap:var(--bb-space-05);padding:var(--bb-space-1) var(--bb-space-15);border-bottom:1px solid var(--bb-border-subdued);font-size:var(--bb-font-body-sm);font-weight:var(--bb-weight-bold)}
.pane-header a{font-size:var(--bb-font-mono-sm)}.pane-scroll{overflow:auto;flex:1;min-height:0;background:var(--bb-surface-sunken);overscroll-behavior:contain}
.pane-scroll img{display:block;width:100%;height:auto;margin:0 auto;background:var(--bb-surface)}.pane-scroll.zoomed img{width:max(100%,1120px)}
.pane-scroll .pane-missing{margin:var(--bb-space-3);color:var(--bb-text-secondary);font-size:var(--bb-font-body-sm)}
.small-modal{width:min(530px,calc(100vw - var(--bb-space-3)))}.small-copy,.method-copy{margin:var(--bb-space-2);font-size:var(--bb-font-body-sm);color:var(--bb-text-secondary);line-height:var(--bb-leading-snug)}
.method-copy p:first-child{margin-top:0}.brand-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bb-space-05);padding:0 var(--bb-space-2) var(--bb-space-15)}
.brand-list label{display:flex;align-items:center;gap:var(--bb-space-1);border:1px solid var(--bb-border-subdued);border-radius:var(--bb-radius-input);padding:var(--bb-space-1);font-size:var(--bb-font-body-sm)}
.brand-list input,.viewer-options input{accent-color:var(--bb-color-red)}.dialog-actions{padding:var(--bb-space-15) var(--bb-space-2) var(--bb-space-2);display:flex;justify-content:flex-end}
@media(max-width:1050px){.mast-inner,.intro-inner,.workspace,.footer{width:calc(100% - var(--bb-space-5))}.workspace{grid-template-columns:176px minmax(0,1fr);gap:var(--bb-space-2)}.intro-inner{gap:var(--bb-space-3)}.lane{--card-width:265px}}
@media(max-width:767px){.mast-inner,.intro-inner,.workspace,.footer{width:calc(100% - var(--bb-space-3))}.mast-inner{height:56px}.intro-inner{grid-template-columns:1fr;gap:var(--bb-space-15);padding:var(--bb-space-3) 0}.intro h1{font-size:clamp(2rem,8vw,var(--bb-font-h1))}.workspace{display:block;padding-top:var(--bb-space-2)}.sidebar{position:static;padding:0;margin-bottom:var(--bb-space-2);display:flex;align-items:center;gap:var(--bb-space-1);max-height:none;border:0;background:none}.sidebar-title,#category-nav{display:none}.mobile-label,#category-mobile{display:block}.mobile-label{font-size:var(--bb-font-body-sm);font-weight:var(--bb-weight-semibold);color:var(--bb-text-secondary)}#category-mobile{color:var(--bb-text);width:100%;min-width:0;min-height:var(--bb-control-height);border:1px solid var(--bb-border);border-radius:var(--bb-radius-input);background:var(--bb-surface);padding:var(--bb-space-1) var(--bb-space-15);font-size:var(--bb-font-body-sm)}.board h2{font-size:var(--bb-font-h3)}.lane{--card-width:min(75vw,315px)}.card.is-anchor{position:static;box-shadow:none}.shot{height:233px}.toolbar .bb-button,.arrows .bb-button{--_height:var(--bb-control-height)}.footer span:last-child{display:none}.dialog-header h2{font-size:var(--bb-font-h4)}.viewer{margin:auto auto 0;max-width:100%;width:100%;border-radius:var(--bb-radius-card) var(--bb-radius-card) 0 0}.viewer-panes{height:70dvh}.pane-header{padding:var(--bb-space-1);font-size:var(--bb-font-mono-sm)}.pane-header a{font-size:10px}.pane-scroll.zoomed img{width:740px}.preview-tools button{min-height:36px;min-width:32px}}
@media(max-width:420px){.toolbar-right .tool span{display:none}.toolbar-right #brand-open{padding-inline:var(--bb-space-1)}.segments .bb-segmented__item{padding-inline:var(--bb-space-1)}}
.shot.context{touch-action:none}
.shot.context:focus-visible{outline:2px solid var(--bb-color-red);outline-offset:-2px}
.context-stage img{max-width:none}
.pane-images{min-width:100%}
.pane-scroll .pane-images img,.pane-scroll.zoomed .pane-images img{width:100%;height:auto;margin:0;max-width:none}
.capture-hint{margin:0 0 var(--bb-space-1);min-height:20px}
@media(max-width:767px){.preview-tools button{min-width:var(--bb-control-height);min-height:var(--bb-control-height)}.zoom-chip{min-height:var(--bb-control-height)}}
.shot.context:focus-visible{outline:none;box-shadow:inset var(--bb-shadow-focus)}
.context-stage img{max-width:none;vertical-align:top}
.card-info{min-width:0;display:grid;gap:var(--bb-space-025)}
.source-label{font-family:var(--bb-font-mono);font-weight:var(--bb-weight-bold);color:var(--bb-text)}
.alternative-link{color:var(--bb-color-red-deep);font-weight:var(--bb-weight-semibold);text-underline-offset:3px}
.card-info .alternative-link{white-space:normal;color:var(--bb-color-red-deep)}
.missing-content{max-width:280px}
.missing-content strong{display:block;color:var(--bb-text);font-size:var(--bb-font-body-sm)}
.missing-content p{margin:var(--bb-space-05) 0 var(--bb-space-1)}
.missing-content a{display:inline-block;margin-top:var(--bb-space-025)}