#ranked-band.ranked-band{
        width:min(1240px,calc(100vw - 48px));
        position:relative;left:50%;transform:translateX(-50%);
        margin:clamp(28px,3.4vw,46px) 0 clamp(30px,3.8vw,52px);
        padding:0 !important;
        scroll-margin-top:76px;
      }
      .rb-wrap{width:100%;font-family:var(--font-body);color:var(--text,#1a1a1f)}
      .rb-head{display:flex;align-items:center;justify-content:flex-start;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin:0 0 18px}
      .rb-head-copy{min-width:0}
      .rb-title{margin:0;font-family:var(--font-display);font-size:clamp(1.55rem,2.2vw,2.1rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--text,#1a1a1f)}
      .rb-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;flex:none}
      .rb-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text,#1a1a1f) 22%,transparent);font-size:.78rem;font-weight:850;color:var(--text,#1a1a1f);text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}
      .rb-action--primary{border-color:var(--accent-solid,#b91c1c);background:var(--accent-solid,#b91c1c);color:#fff}
      .rb-action:hover{transform:translateY(-2px);border-color:var(--accent-solid,#b91c1c)}
      .rb-action--primary:hover{background:#991b1b}
      /* Board + globe side by side. The globe column was 480px wide per
         the founder 2026-09-01, then cut 20% to 384px on his call the
         same day ("globe can decrease in size by like 20%"); the board
         keeps whatever is left. The header actions sit beside the title
         rather than at the far edge, which put them over the globe.
         align-items:center so the sphere floats beside the middle of
         the board rather than hanging off its top edge.
         2026-09-02, the founder off a marked-up screenshot: the board
         squishes in and the globe column widens, with a bigger gutter
         between them. The SPHERE does not grow (.rb-globe-canvas-wrap
         still caps at 384px, the size he called): the extra column width
         is margin around it, so the globe stops sitting against the page
         edge with the board pressed up on its other side. */
      .rb-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,33vw,436px);gap:clamp(26px,3.4vw,52px);align-items:start}
      /* 2026-09-01, founder off a screenshot ("FIX THIS SPACING"): with a
         full board the stage is ~3x the globe column's height, and
         align-items:center parked the sphere mid-column with dead space
         above and below it. The column now starts level with the board's
         top edge and sticks under the topbar while the board scrolls past,
         which is the same pin the section's rail already uses. */
      .rb-globe{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;position:sticky;top:88px;align-self:start}
      /* aspect-ratio + min sizes reserve the square before the canvas
         backing buffer is sized (same first-paint race the hero wrap
         guarded against). */
      .rb-globe-canvas-wrap{position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:384px;aspect-ratio:1;min-width:220px;min-height:220px}
      .rb-globe-canvas{width:100%;height:100%;display:block;-webkit-mask-image:radial-gradient(circle at 50% 52%, #000 80%, transparent 98%);mask-image:radial-gradient(circle at 50% 52%, #000 80%, transparent 98%)}
      .rb-globe-caption{margin:0;max-width:360px;text-align:center;font-size:.92rem;line-height:1.5;color:var(--text-dim,#4b443d)}
      .rb-globe-caption b{color:var(--accent-solid,#b91c1c);font-variant-numeric:tabular-nums}
      @media(max-width:980px){
        .rb-main{grid-template-columns:1fr;gap:22px}
        .rb-globe{position:static}
        .rb-globe-canvas-wrap{max-width:320px;min-width:0;min-height:200px}
      }
      .rb-stage{position:relative;overflow:hidden;padding:10px;border:1px solid rgba(104,91,75,.16);border-radius:16px;background:#fff;box-shadow:0 18px 46px -34px rgba(35,24,12,.28);color:#1a1a1f}
      .rb-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-solid,#b91c1c)}
      #ranked-band .rb-board{display:flex;flex-direction:column;gap:8px}
      #ranked-band .rb-row{display:grid;grid-template-columns:32px 52px minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:68px;padding:8px 14px 8px 10px;border:1px solid rgba(104,91,75,.14);border-radius:10px;background:#fff;color:#1a1a1f;text-decoration:none;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}
      #ranked-band .rb-row:hover{transform:translateX(3px);border-color:rgba(185,28,28,.38);background:#fdfaf7}
      #ranked-band .rb-row--top{border-color:rgba(217,154,28,.48);background:#fffdf8}
      #ranked-band .rb-rk{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f0ece7;font-size:.8rem;font-weight:900;font-variant-numeric:tabular-nums;color:#6f665d}
      #ranked-band .rb-row--top .rb-rk{color:#3b2908;background:radial-gradient(circle at 32% 28%,#fde68a,#f59e0b 60%,#92400e);box-shadow:0 0 18px rgba(245,158,11,.28)}
      #ranked-band .rb-rk--silver{color:#111827;background:radial-gradient(circle at 32% 28%,#f8fafc,#94a3b8 65%,#475569)}
      #ranked-band .rb-rk--bronze{color:#2a1704;background:radial-gradient(circle at 32% 28%,#fcd34d,#d97706 65%,#78350f)}
      #ranked-band .rb-ava{position:relative;display:grid;place-items:center;width:52px;height:52px;overflow:hidden;border:1px solid rgba(104,91,75,.18);border-radius:14px;background:#eee9e3;color:#25211e;font-size:.8rem;font-weight:900}
      #ranked-band .rb-ava img,#ranked-band .rb-ava svg{display:block;width:100%;height:100%;object-fit:cover}
      #ranked-band .rb-ava .rb-ava-art{position:absolute;inset:0}
      #ranked-band .rb-ava img{position:relative;z-index:1}
      /* A person's own account photo sits above the supplied stand-in.
         The latter is later in the DOM, so lower it explicitly. */
      #ranked-band .rb-ava img.db-pfp{position:absolute;inset:0;z-index:0}
      #ranked-band .rb-ava--anon{border-style:dashed}
      #ranked-band .rb-who{display:flex;min-width:0;flex-direction:column}
      #ranked-band .rb-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem;font-weight:850;letter-spacing:-.01em;color:#1a1a1f}
      #ranked-band .rb-pts{display:contents}
      #ranked-band .rb-metric{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:56px}
      #ranked-band .rb-metric-value{display:block;font-family:var(--font-display);font-size:1.08rem;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;text-align:right;color:#1a1a1f}
      #ranked-band .rb-metric-label{font-size:.65rem;line-height:1.1;font-weight:400;color:#6f665d}
      #ranked-band .rb-chal-btn{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:6px 10px;border:1px solid rgba(185,28,28,.46);border-radius:999px;font-size:.56rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#b91c1c;text-decoration:none}
      #ranked-band .rb-chal-btn:hover{background:#b91c1c;color:#fff}
      #ranked-band .rb-row--ghost{border-style:dashed;background:transparent}
      #ranked-band .rb-row--ghost .rb-ava{border-style:dashed;background:transparent;color:#756d65}
      #ranked-band .rb-row--ghost .rb-nm{color:#5f5750}
      #ranked-band .rb-ghost-cta{grid-column:4 / -1;justify-self:end;font-size:.7rem;font-weight:900;color:#b91c1c;white-space:nowrap}
      #ranked-band .rb-loading{display:flex;flex-direction:column;gap:6px}
      #ranked-band .rb-load-row{display:grid;grid-template-columns:32px 52px 1fr 92px;align-items:center;gap:14px;min-height:68px;padding:8px 14px 8px 10px;border:1px solid rgba(104,91,75,.12);border-radius:10px}
      #ranked-band .rb-load-row i{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,rgba(104,91,75,.06),rgba(104,91,75,.14),rgba(104,91,75,.06));background-size:220% 100%;animation:rbShimmer 1.2s linear infinite}
      #ranked-band .rb-load-row i:nth-child(1){width:26px}#ranked-band .rb-load-row i:nth-child(2){width:50px;height:50px;border-radius:13px}#ranked-band .rb-load-row i:nth-child(4){width:92px;justify-self:end}
      #ranked-band .rb-empty{padding:28px 18px;border:1px dashed rgba(104,91,75,.22);border-radius:12px;text-align:center;color:#756d65}
      #ranked-band .rb-empty b{display:block;margin-bottom:6px;font-size:1rem;color:#1a1a1f}
      #ranked-band .rb-empty a{display:inline-block;margin-top:12px;font-weight:850;color:#b91c1c}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-stage{border-color:rgba(255,255,255,.12);background:#000;box-shadow:0 24px 60px -36px rgba(0,0,0,.9);color:#f8f1ed}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-row{border-color:rgba(255,255,255,.11);background:#0b0b0d;color:#f8f1ed}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-row:hover{border-color:rgba(239,68,68,.46);background:#111114}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-row--top{border-color:rgba(246,201,101,.48);background:#100e0a}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-rk{background:#202024;color:#aaa19b}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-ava{border-color:rgba(255,255,255,.14);background:#171719;color:#fff}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band :is(.rb-nm,.rb-metric-value){color:#fff}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-metric-label{color:#aaa19b}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-row--ghost .rb-nm{color:#c5b8b1}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-load-row{border-color:rgba(255,255,255,.08)}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-load-row i{background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.13),rgba(255,255,255,.055));background-size:220% 100%}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-empty{border-color:rgba(255,255,255,.18);color:#a99c96}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-empty b{color:#fff}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-globe-caption{color:rgba(245,239,231,.78)}
      :is([data-theme="dark"],[data-theme="crimson"],[data-theme="grey"],[data-theme="stone"]) #ranked-band .rb-globe-caption b{color:#ef4444}
      @keyframes rbShimmer{to{background-position:-220% 0}}
      @keyframes rbAvaSpin{to{transform:rotate(360deg)}}
      @keyframes rbAvaBreathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
      @keyframes rbAvaDrift{0%,100%{transform:translateX(-5%)}50%{transform:translateX(5%)}}
      #ranked-band .rb-ava-spin{transform-origin:50% 50%;animation:rbAvaSpin 30s linear infinite}
      #ranked-band .rb-ava-breathe{transform-origin:50% 50%;animation:rbAvaBreathe 9s ease-in-out infinite}
      #ranked-band .rb-ava-drift{animation:rbAvaDrift 22s ease-in-out infinite}
      @media(max-width:760px){
        #ranked-band.ranked-band{width:calc(100vw - 28px);margin-top:28px}
        .rb-head{align-items:flex-start;flex-direction:column;gap:15px}
        .rb-actions{width:100%;justify-content:flex-start}
        .rb-action{flex:1 1 auto}
        .rb-stage{padding:15px 12px;border-radius:14px}
        #ranked-band .rb-row{grid-template-columns:28px 44px minmax(0,1fr) auto auto;gap:8px;min-height:60px;padding:7px 9px 7px 7px}
        #ranked-band .rb-rk{width:27px;height:27px;border-radius:7px;font-size:.72rem}
        #ranked-band .rb-ava{width:44px;height:44px;border-radius:12px}
        #ranked-band .rb-nm{font-size:.86rem}
        #ranked-band .rb-metric{min-width:44px}
        #ranked-band .rb-metric-value{font-size:.96rem}
        #ranked-band .rb-chal-btn{min-width:0;padding:5px 8px;font-size:.54rem}
        #ranked-band .rb-load-row{grid-template-columns:28px 44px 1fr 70px;gap:8px;min-height:60px;padding:7px 9px 7px 7px}
      }
      @media(max-width:430px){
        .rb-title{font-size:1.72rem}
      }
      @media(prefers-reduced-motion:reduce){
        .rb-action,#ranked-band .rb-row{transition:none}
        #ranked-band .rb-row:hover{transform:none}
        #ranked-band .rb-load-row i,#ranked-band .rb-ava-spin,#ranked-band .rb-ava-breathe,#ranked-band .rb-ava-drift{animation:none}
      }

.rb-who{min-width:0}.rb-ideology{display:block!important;font-size:11px;color:var(--dim,#737373)}
.rb-profile-link{display:block;font-size:11px;line-height:1.5;color:inherit;text-decoration:underline;text-underline-offset:3px}