.genre-comparison,.genre-comparison-page{min-width:0;max-width:100%}.genre-compare-controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end;margin-bottom:1rem}.genre-compare-controls .share-page{margin-left:auto}.genre-compare-picker{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin:1rem 0;padding:1rem;border:1px solid var(--border);border-radius:10px;background:#f7f7f7}.genre-compare-picker legend{font-weight:700}.genre-compare-picker>label{flex:1 1 220px;max-width:100%}.genre-compare-picker-actions{display:flex;flex-wrap:wrap;gap:.6rem}.genre-comparison label{display:grid;gap:.35rem;font-weight:600;min-width:0}.genre-comparison button,.genre-comparison select{min-height:44px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit}.genre-comparison select{width:100%;min-width:0}.genre-comparison button{cursor:pointer}.genre-comparison button:disabled{opacity:.5;cursor:default}.genre-comparison :is(button,select,summary,.genre-compare-scroll-top,.genre-compare-scroll):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.genre-compare-method{margin:1rem 0}.genre-compare-method>summary{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;max-width:100%;cursor:pointer;min-height:44px;padding:.6rem .7rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--accent);font-weight:600;list-style:none}.genre-compare-method>summary::-webkit-details-marker{display:none}.genre-compare-method>summary:before{content:"";flex:0 0 .4em;width:.4em;height:.4em;border:solid;border-width:0 .12em .12em 0;transform:rotate(-45deg)}.genre-compare-method[open]>summary:before{transform:rotate(45deg)}.genre-compare-scroll-top{position:sticky;top:68px;z-index:5;height:18px;max-width:100%;overflow-x:auto;overflow-y:hidden;background:var(--surface)}.genre-compare-scroll-top>div{height:1px}.genre-compare-scroll{overflow-x:auto;max-width:100%;margin-top:.6rem;padding-bottom:.8rem}.genre-compare-columns{display:grid;column-gap:1rem;row-gap:0}.genre-compare-column{--genre-column-surface:#f7f7f7;min-width:0;border:1px solid color-mix(in srgb,var(--genre-column-accent) 22%,var(--border));border-top:4px solid var(--genre-column-accent);border-radius:12px;background:var(--genre-column-surface);padding:1rem}.genre-compare-column,.genre-compare-column>.leaderboard-list{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}.genre-compare-column>.leaderboard-list{margin:0;padding:0;list-style:none}.genre-compare-column header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;align-items:center}.genre-compare-category{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}.genre-compare-column h2{margin:1.2rem 0 .7rem;overflow-wrap:anywhere}.genre-compare-average,.genre-compare-posted,.genre-compare-total{display:grid;gap:.4rem;margin-bottom:1rem}.genre-compare-average strong,.genre-compare-total strong{font-size:1.65rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.genre-compare-average span,.genre-compare-posted span{color:var(--muted);font-size:.85rem}.genre-compare-difference-details p{overflow-wrap:anywhere}:root .genre-comparison .genre-compare-column .leaderboard-row,:root .genre-comparison .genre-compare-column .leaderboard-row:nth-child(2n){background:var(--genre-column-surface)}:root[data-theme=dark] .genre-compare-column{--genre-column-surface:#262626;border-top-color:color-mix(in srgb,var(--genre-column-accent) 80%,var(--genre-column-surface))}:root[data-theme=dark] .genre-compare-picker{background:#262626}.genre-compare-column .video-leaderboard-row{grid-template-columns:2.3rem 5.5rem minmax(0,1fr);gap:.45rem;padding:.7rem 0;align-items:start}.genre-compare-column .video-leaderboard-row>.rank-value{grid-column:3;text-align:left;margin-top:-.25rem;white-space:normal;min-width:0;overflow-wrap:anywhere}.genre-compare-column .rank-title{font-size:.9rem}.genre-compare-column .rank-image-video{width:88px;height:50px;object-fit:cover}.genre-compare-column .rank-channel{font-size:.75rem}.genre-compare-column .rank-number{font-size:1.1rem}@media (max-width:600px){.genre-compare-column{padding:.7rem}.genre-compare-controls label{flex:1 1 140px}}