/* ============================================================================================================
   Blur UI, the component system behind every Blur screen in the deck.
   One stylesheet, one icon set (assets/blur-ui/*.png, cut from the 2023 blur.io captures at 2x), one scale.
   A screen is a .bu page at the shipped site's own size, 1440 x 1001 (1440 wide capture, status bar at the
   bottom), scaled into its frame with transform: scale(var(--k)). Every metric below is a pixel measured on
   the captures (nav 62, header 84, rails at x 240 and 1078, 24 px panel padding, 50 px item rows, 26 px feed
   rows, 32 px status bar). Text is ProtoMono 14/20 with no tracking: SemiBold uppercase for labels, Regular
   for names and numbers. Colour and glow come from the captures too: amber #F6AE2D is "active", orange
   #FF8700 is "action", green gains, red-orange rarity, and lit text carries the two-layer 20 px glow.
   ============================================================================================================ */
.bu,.bu *{box-sizing:border-box}   /* the deck's box model, stated here so the preview renders exactly what the deck shows */
.bu{
  --bu-bg:#080404; --bu-rule:#303030; --bu-field:#1E1E1E; --bu-cell:#2B2B2B; --bu-sel:#171717; --bu-sel2:#282828; --bu-open:#505050;
  --bu-text:#E3E3E3; --bu-muted:#929292; --bu-dim:#696969;
  --bu-amber:#F6AE2D; --bu-orange:#FF8700; --bu-logo:#FF6E26; --bu-green:#ADE25D; --bu-red:#F95200; --bu-blue:#3B8BEB;
  --bu-chart:#F95200; --bu-chart-rgb:249,82,0;   /* the charts: every line, bar, inset fill and marker draws in Blur's red orange (the capture's); insets are rgba(var(--bu-chart-rgb),a) */
  --bu-glow-amber:0 0 20px #F6AE2D,0 0 20px rgba(246,174,45,.5);
  --bu-glow-orange:0 0 20px #FF8700,0 0 20px rgba(255,135,0,.5);
  --bu-glow-green:0 0 20px #ADE25D,0 0 20px rgba(173,226,93,.5);
  --bu-glow-red:0 0 20px #F95200,0 0 20px rgba(249,82,0,.5);
  --bu-glow-line:0 0 6px #F6AE2D,0 0 14px rgba(246,174,45,.6);
  --bu-font:"ProtoMono","JetBrains Mono",monospace;
  position:absolute;left:0;top:0;width:1440px;height:1001px;overflow:hidden;
  background:var(--bu-bg);color:var(--bu-text);
  font:400 14px/20px var(--bu-font);letter-spacing:0;text-align:left;white-space:nowrap;
  transform:scale(var(--k,1));transform-origin:0 0;
  -webkit-font-smoothing:antialiased;
}
.bu *{box-sizing:border-box}
.bu img{display:block}
/* the deck has generic .th and .eth rules of its own: reset them inside a page */
.bu .th{position:static;inset:auto;display:block;flex-direction:row;align-items:normal;justify-content:normal}
.bu .bu-r .th,.bu .bu-f .th{position:absolute}
/* a frame holds a page and scales it: width:W; --k is W/1440 */
.bu-frame{position:absolute;overflow:hidden;background:#080404;aspect-ratio:1440/1001}
.bu-frame>.bu{--k:var(--bk,calc(1000/1440))}

/* ---------- type roles ---------- */
.bu .lb,.bu .bu-nav a,.bu .bu-tab,.bu .bu-chip,.bu .bu-btn,.bu .bu-th>*,.bu .bu-sec-h,.bu .bu-tg,.bu .bu-stat em,.bu .bu-fieldrow .k,.bu .bu-attr,.bu .bu-reset,.bu .bu-rh,.bu .bu-all,.bu .bu-dh,.bu .bu-ah{font-weight:600;text-transform:uppercase}
.bu .sm{font-size:12px}
.bu .md{font-size:16px}
.bu .muted,.bu .lb{color:var(--bu-muted);--mark:currentColor}
.bu .dim{color:var(--bu-dim)}
.bu .amber{color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .orange{color:var(--bu-orange);--mark:currentColor;text-shadow:var(--bu-glow-orange)}
.bu .green{color:var(--bu-green);--mark:currentColor;text-shadow:var(--bu-glow-green)}
.bu .red{color:var(--bu-red);--mark:currentColor;text-shadow:var(--bu-glow-red)}   /* the colour utilities set --mark too, so an ETH mark inside them matches */
.bu .plain{text-shadow:none}

/* ---------- icons: single-colour pixel glyphs as masks, coloured by currentColor ---------- */
.bu .ic{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}   /* contain: a glyph keeps its proportions in any box and centres in it, so a box of the wrong aspect can no longer squash it */
.bu .ic.glow{filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px rgba(246,174,45,.45))}
/* the ETH mark is a mask filled with --mark. Every rule in this sheet that sets a text colour also sets --mark: currentColor for a
   coloured text (orange, amber, green, red, dim, a button's ink), the muted grey for the default text. So the mark always matches
   coloured text and is muted next to plain text, with no per-instance rule. Keep that pairing when adding a colour. */
.bu{--mark:var(--bu-muted)}
.bu .eth{display:inline-block;flex:none;width:12.5px;height:18px;margin-left:2px;vertical-align:-4px;background:var(--mark);-webkit-mask:url(eth-m.png) center/100% 100% no-repeat;mask:url(eth-m.png) center/100% 100% no-repeat}
.bu .eth.s{width:10.5px;height:17px;margin-left:4px;vertical-align:-3.5px;-webkit-mask-image:url(eth-sm-m.png);mask-image:url(eth-sm-m.png)}
.bu .green .eth,.bu .red .eth,.bu .amber .eth,.bu .orange .eth{filter:drop-shadow(0 0 6px var(--mark))}   /* the glow the coloured text has */
.bu .plain .eth{filter:none}


/* ---------- icon names (masks live next to this file) ---------- */
.bu .i-act{--i:url(act.png)}
.bu .i-attr{--i:url(attr.png)}
.bu .i-bell{--i:url(bell.svg)}
.bu .i-broom{--i:url(broom.png)}
.bu .i-check{--i:url(checkmark.svg)}.bu .i-grid{--i:url(grid.svg)}.bu .i-graph{--i:url(graph.svg)}   /* Checkmark, Grid and Graph from the Figma icon set, as vectors cut to the glyph (the check was a 13px bitmap, and the Customize sheet drew its mode icons by scaling 14px bitmaps up to 44px) */
.bu .i-chev{--i:url(chev.png)}
.bu .i-chev-up{--i:url(chev-up.png)}
.bu .i-circ1{--i:url(circ1.png)}
.bu .i-circ2{--i:url(circ2.png)}
.bu .i-circ3{--i:url(circ3.png)}
.bu .i-cmd{--i:url(cmd.png)}
.bu .i-colls{--i:url(colls.png)}
.bu .i-tab-charts{--i:url(tab-charts.png)}
.bu .i-collection-horizontal{--i:url(collection-horizontal.svg)}.bu .i-star-empty{--i:url(star-empty.svg)}.bu .i-star-filled{--i:url(star-filled.svg)}.bu .i-book{--i:url(book.svg)}.bu .i-list-normal{--i:url(list-normal.svg)}.bu .i-list-condensed{--i:url(list-condensed.svg)}   /* from the Figma icon set, as vectors cut to the glyph */
.bu .i-tag{--i:url(tag.png)}
.bu .i-bag{--i:url(bag.png)}
.bu .i-vt-1{--i:url(vt-1.png?v=2)}
.bu .i-vt-2{--i:url(vt-2.png?v=2)}
.bu .i-cross{--i:url(cross.png)}
.bu .i-depth{--i:url(depth.png)}
.bu .i-discord{--i:url(discord.png)}
.bu .i-expand{--i:url(expand.png)}
.bu .i-gas{--i:url(gas.png)}
.bu .i-gear{--i:url(gear.png?v=2)}   /* v2: the mask is opaque at its peak (it was cut at 63% and drew the gear dim) */
.bu .i-handle-l{--i:url(handle-l.png?v=3)}
.bu .i-handle-r{--i:url(handle-r.png?v=3)}
.bu .i-hourglass{--i:url(hourglass.png)}
.bu .i-info{--i:url(info.png)}
.bu .i-live{--i:url(live.png)}
.bu .i-mag{--i:url(mag.png)}
.bu .i-rchev{--i:url(rchev.png)}
.bu .i-sales{--i:url(sales.png)}
.bu .i-sort{--i:url(sort.png?v=2)}
.bu .i-speed{--i:url(speed.png)}
.bu .i-star{--i:url(star.png)}
.bu .i-tab-bids{--i:url(tab-bids.png)}
.bu .i-tab-items{--i:url(tab-items.png)}
.bu .i-tab-lend{--i:url(tab-lend.png)}
.bu .i-twitter{--i:url(twitter.png)}
.bu .i-view-1{--i:url(view-1.png)}
.bu .i-view-2{--i:url(view-2.png)}
.bu .i-view-3{--i:url(view-3.png)}
.bu .i-view-4{--i:url(view-4.png)}
.bu .i-view-5{--i:url(view-5.png)}

/* ---------- primitives ---------- */
.bu .bu-box{border:1px solid var(--bu-rule);border-radius:4px}
.bu .bu-chip{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 6px 0 9px;border:1px solid var(--bu-rule);border-radius:4px;font-size:12px;line-height:20px;color:var(--bu-orange);--mark:currentColor;text-shadow:var(--bu-glow-orange)}   /* lit, like every orange label */
.bu .bu-chip i{width:1px;height:100%;margin:0 8px 0 9px;background:var(--bu-rule)}
.bu .bu-chip .n{display:inline-block}
.bu .bu-chip.gray{color:var(--bu-text);--mark:var(--bu-muted);text-shadow:none;height:20px;padding:0 8px;border-radius:2px}
.bu .bu-btn{display:inline-flex;align-items:center;height:36px;padding:0 10px;border-radius:4px;background:var(--bu-orange);color:#080404;--mark:currentColor;font-size:14px}
.bu .bu-btn.wide{justify-content:space-between;width:200px}
.bu .bu-btn.off{background:var(--bu-rule);color:var(--bu-dim);--mark:currentColor}
.bu .bu-btn.done{background:var(--bu-green)}
.bu .bu-cb{display:inline-block;flex:none;width:16px;height:16px;border:1px solid var(--bu-dim);border-radius:2px;background:var(--bu-field);position:relative}
.bu .bu-cb::after{content:"";position:absolute;left:1px;top:3px;width:13px;height:10px;background:var(--bu-text);-webkit-mask:url(check.png) center/100% 100% no-repeat;mask:url(check.png) center/100% 100% no-repeat;opacity:0;transition:opacity .25s ease}
.bu .bu-cb.on::after,.bu .on>.bu-cb::after{opacity:1}
.bu .bu-tgl{display:inline-block;flex:none;position:relative;width:36px;height:20px;border-radius:10px;background:var(--bu-bg);border:1px solid var(--bu-rule)}
.bu .bu-tgl::after{content:"";position:absolute;left:1px;top:1px;width:16px;height:16px;border-radius:50%;background:var(--bu-dim);transition:left .3s ease,background .3s ease}
.bu .bu-tgl.on{background:var(--bu-rule);border-color:var(--bu-rule)}
.bu .bu-tgl.on::after{left:17px;background:var(--bu-amber);box-shadow:0 0 8px rgba(246,174,45,.8)}

.bu .bu-input{position:absolute;height:39px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--bu-rule);border-radius:4px;color:var(--bu-muted);--mark:currentColor}   /* one row, everything on its centre line: the icon, the placeholder and the shortcut */
.bu .bu-input .ic{position:static;flex:none;width:18px;height:18px}
.bu .bu-input span{position:static;margin-top:-1px}
.bu .bu-input .k{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--bu-dim);--mark:currentColor}
.bu .bu-input .k .ic{width:18px;height:18px}
/* a two-row MIN/MAX field block */
.bu .bu-fieldrow{position:absolute;left:23px;width:194px;border:1px solid var(--bu-rule);border-radius:4px}
.bu .bu-fieldrow>div{position:relative;height:37px;display:flex}
.bu .bu-fieldrow>div+div{border-top:1px solid var(--bu-rule)}
.bu .bu-fieldrow .k{display:flex;align-items:center;justify-content:center;gap:6px;width:96px;border-right:1px solid var(--bu-rule);background:var(--bu-field);color:var(--bu-muted);--mark:currentColor}
.bu .bu-fieldrow .v{display:flex;align-items:center;padding-left:9px}
/* the pending-count badge: a ring of 2 px blocks on the pixel grid, the lit head walking round once every 1.05 s with a trail, the count inside */
/* the pending badge: a 15px box holding the site's dashed square (data.py PEND); the digit is centred in it. One rule for every feed and the morph slide's overlay */
.bu .bu-pend{position:relative;display:inline-block;width:19px;height:19px;vertical-align:-5px;font-style:normal;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-pend svg{position:absolute;left:0;top:0;width:19px;height:19px;overflow:visible}   /* 19px: data.py PEND.size. The ring is a circle and clears its digit */
.bu .bu-pend rect{animation:bu-pend 1.05s steps(1,end) infinite;animation-delay:calc(var(--n) * -65.625ms)}   /* sixteen blocks round the 1.05s loop */
.bu .bu-pend text{font-family:var(--bu-font);font-size:10px;fill:currentColor}
@keyframes bu-pend{0%{opacity:1}6.25%{opacity:.9}12.5%{opacity:.78}18.75%{opacity:.64}25%{opacity:.5}31.25%{opacity:.38}37.5%{opacity:.26}43.75%{opacity:.16}50%{opacity:.1}100%{opacity:.1}}

/* ---------- nav ---------- */
.bu .bu-nav{position:absolute;left:0;top:0;width:1440px;height:62px;border-bottom:1px solid var(--bu-rule)}
.bu .bu-nav>*{position:absolute}
.bu .bu-logo{left:24px;top:23px;width:63px;height:15px;color:var(--bu-logo);background:currentColor;-webkit-mask:url(../logos/monochrome-blur-logo.svg) 0 0/100% 100% no-repeat;mask:url(../logos/monochrome-blur-logo.svg) 0 0/100% 100% no-repeat;filter:drop-shadow(0 0 7px rgba(255,110,38,.9)) drop-shadow(0 0 14px rgba(255,110,38,.5))}
.bu .bu-nav a{top:22px;color:var(--bu-muted);--mark:currentColor;text-decoration:none}
.bu .bu-nav a.on{color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .bu-nav a:nth-of-type(1){left:110px}.bu .bu-nav a:nth-of-type(2){left:233px}.bu .bu-nav a:nth-of-type(3){left:338px}.bu .bu-nav a:nth-of-type(4){left:434px}
.bu .bu-search{left:545px;top:12px;width:350px}
.bu .bu-pts{text-transform:uppercase;font-weight:600;left:1000px;top:21px;font-size:12px;color:var(--bu-green);--mark:currentColor;text-shadow:var(--bu-glow-green)}
.bu .bu-loy{text-transform:uppercase;font-weight:600;left:1086px;top:21px;font-size:12px;color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .bu-bell{left:1194px;top:19px;width:24px;height:24px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-wallet{left:1238px;top:12px;width:178px;height:37px;border:1px solid var(--bu-rule);border-radius:4px;display:flex}
.bu .bu-wallet .bal{width:80px;padding:8px 0 0 8px;color:var(--bu-muted);--mark:currentColor;border-right:1px solid var(--bu-rule)}
.bu .bu-wallet .acct{flex:1;display:flex;align-items:center;gap:8px;padding-left:8px;color:var(--bu-orange);--mark:currentColor;text-shadow:var(--bu-glow-orange)}
.bu .bu-wallet .acct img{width:20px;height:20px;border-radius:50%}

/* ---------- collection header ---------- */
.bu .bu-head{position:absolute;left:0;top:62px;width:1440px;height:84px;border-bottom:1px solid var(--bu-rule)}
.bu .bu-head>*{position:absolute}
.bu .bu-head .av{left:23px;top:17px;width:50px;height:50px;border-radius:50%}
.bu .bu-head .nm{left:88px;top:14px;font-size:20px;line-height:28px}
.bu .bu-head .star{left:210px;top:20px;width:18px;height:18px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-head .star.on{color:var(--bu-amber);--mark:currentColor;background:currentColor;-webkit-mask-image:url(star-filled.svg);mask-image:url(star-filled.svg)}   /* the Figma vector (star-on.png never existed, so a lit star drew nothing) */
.bu .bu-head .soc{left:90px;top:45px;width:124px;height:24px}
.bu .bu-stat{top:19px;text-align:right}
.bu .bu-stat em{display:block;font-style:normal;color:var(--bu-muted);--mark:currentColor}
.bu .bu-stat b{display:block;margin-top:2px;font-weight:400}
.bu .bu-stat b.green{font-weight:400}

/* ---------- the three rails ---------- */
.bu .bu-side{position:absolute;left:0;top:146px;width:240px;height:823px;border-right:1px solid var(--bu-rule);overflow:hidden}
.bu .bu-main{position:absolute;left:240px;top:146px;width:838px;height:823px;border-right:1px solid var(--bu-rule);overflow:hidden}
.bu .bu-right{position:absolute;left:1078px;top:146px;width:362px;height:823px;overflow:hidden}
.bu .bu-side>*,.bu .bu-main>*,.bu .bu-right>*,.bu .bu-list>*{position:absolute}
.bu .bu-handle{position:absolute;top:157px;width:15px;height:45px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid var(--bu-rule);background:var(--bu-bg);color:var(--bu-muted);--mark:currentColor;z-index:2}   /* the rail handle, as on the site: a 15 x 45 tab on the panel line, the line breaking around it. Its left comes from the generator, off the panel it sits on */
.bu .bu-handle .ic{width:7px;height:12px}   /* the chevrons are cut from the site capture at this size */
.bu .bu-handle.l{border-right:0;border-radius:6px 0 0 6px}
.bu .bu-handle.r{border-left:0;border-radius:0 6px 6px 0}
.bu .bu-rule{position:absolute;height:1px;background:var(--bu-rule)}

/* ---------- sidebar (filters) ---------- */
.bu .bu-sec-h{left:24px;font-size:14px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-side .chev{position:absolute;left:200px;width:14px;height:9px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-tg{left:24px;display:flex;align-items:center;gap:8px;height:22px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-tg .bu-tgl{margin-right:0}
.bu .bu-tops{left:24px;display:flex;gap:10px}
.bu .bu-tops span{width:57px;height:38px;padding-top:4px;border:1px solid var(--bu-orange);border-radius:4px;text-align:center;font-size:12px;line-height:14px;font-weight:600;text-transform:uppercase;color:var(--bu-orange);--mark:currentColor;text-shadow:var(--bu-glow-orange);box-shadow:0 0 8px rgba(255,135,0,.28)}
.bu .bu-attr{left:24px;display:flex;align-items:center;gap:11px;color:var(--bu-text);--mark:var(--bu-muted);font-size:16px}
.bu .bu-attr .ic{width:17px;height:15px;margin-left:1px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-reset{right:24px;color:var(--bu-orange);--mark:currentColor;text-shadow:var(--bu-glow-orange)}
.bu .bu-group{left:14px;width:212px;height:28px;background:var(--bu-open);display:flex;align-items:center;padding:0 10px}
.bu .bu-group b{font-weight:400}
.bu .bu-group em{font-style:normal;margin-left:auto;margin-right:12px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-group .ic{width:14px;height:9px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-opt{left:24px;display:flex;align-items:center;gap:8px;height:16px;width:192px}
.bu .bu-opt em{font-style:normal;margin-left:auto;color:var(--bu-muted);--mark:currentColor}

/* ---------- tabs ---------- */
.bu .bu-tab{top:25px;display:flex;align-items:center;gap:10px;height:20px;font-size:16px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-tab .ic{width:16px;height:16px;position:relative;top:0}
.bu .bu-tab.on{color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .bu-tab.on .ic{filter:drop-shadow(0 0 5px rgba(246,174,45,.9)) drop-shadow(0 0 10px rgba(246,174,45,.5))}
.bu .bu-tab.on::after{content:"";position:absolute;left:-2px;right:0;top:41px;height:1px;background:var(--bu-amber);box-shadow:var(--bu-glow-line)}
.bu .bu-tabrule{top:67px;left:24px;right:24px}
.bu .bu-views{top:27px;display:flex;gap:18px}
.bu .bu-views .ic{width:14px;height:14px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-views .ic.on{color:var(--bu-amber);--mark:currentColor}
.bu .bu-views .i-gear{width:16px;height:16px;margin:-1px}   /* gear.png keeps the capture masks' 1px margin while the list vectors are cut to the glyph: a 16px box puts its glyph at 14px like its neighbours, the -1px keeps the 18px gaps */

/* ---------- tables ---------- */
.bu .bu-th{top:91px;left:0;width:100%;height:32px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-th::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--bu-rule)}   /* every table header carries its own rule, and it keeps the panel's 24px margin on both sides, like the tab rule above it and the Collections table's head */
.bu .bu-th>*{position:absolute;top:0}
.bu .bu-th .bu-cb{top:0}
.bu .bu-th .w{color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-th .cnt{top:-2px;left:56px}   /* the count starts where the thumbnails start and sits on the checkbox's centre line */
.bu .bu-th .srt{display:flex;gap:7px;align-items:center}
.bu .bu-th .srt .ic{width:10px;height:15.5px}   /* the site's sort arrow, cut from the capture, centred on the label's line */
.bu .bu-th .info{width:14px;height:14px;top:4px}
.bu .bu-rows{left:0;width:100%}
/* ---------- the Collections page: a full-width panel and the collection table. .bu-ct is one grid for the head and every row: a column's width and
   alignment are set once here. The name column takes the slack; the rest end on the capture's right edges (446 636 826 1017 1207 1311 1416) ---------- */
.bu .bu-list{position:absolute;left:0;top:62px;width:1440px;height:907px;overflow:hidden}
.bu .bu-ct{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px 190px 190px 191px 190px 104px 105px;align-items:center;height:50px;padding:0 24px}
.bu .bu-ct>*{position:static;min-width:0;white-space:nowrap}
.bu .bu-ct>.num,.bu .bu-ct>[data-k]{text-align:right}
.bu .bu-ct.hd{position:absolute;left:0;top:68px;width:100%;height:62px;font-size:14px;font-weight:600;text-transform:uppercase;color:var(--bu-muted);--mark:currentColor}
.bu .bu-ct.hd::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--bu-rule)}   /* the head's rule keeps the page's 24px margin, like the tab rule above it */
.bu .bu-ct.hd::before{display:none}
.bu .bu-ct-rows{position:absolute;left:0;top:136px;width:100%}
.bu .bu-ct .nm{display:flex;align-items:center;gap:14px}
.bu .bu-ct .av{flex:none;width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.bu .bu-ct .fav{width:16px;height:16px;margin-left:-6px;color:var(--bu-amber);--mark:currentColor;filter:drop-shadow(0 0 5px rgba(246,174,45,.6))}
.bu .bu-ct .v{font-weight:400}
.bu .bu-ct::before{content:"";position:absolute;inset:0;background:var(--bu-sel);opacity:0;transition:opacity .2s;z-index:-1}
.bu .bu-ct.hov::before{opacity:1}
.bu .bu-r{position:relative;height:50px}
.bu .bu-r>*{position:absolute;top:15px}
.bu .bu-r::before{content:"";position:absolute;left:14px;right:14px;top:2px;bottom:2px;background:var(--bu-sel);opacity:0;transition:opacity .35s ease}
.bu .bu-r.on::before{opacity:1}
.bu .bu-r .bu-cb{left:24px;top:18px}
.bu .bu-r .th{left:56px;top:6px;width:40px;height:40px;border-radius:3px}
.bu .bu-r .id{left:112px}
.bu .bu-r .num{text-align:right}
.bu .bu-r .pbox{top:11px;height:28px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 7px 0 8px;white-space:nowrap;border:1px solid var(--bu-rule);border-radius:4px}   /* sizes to its price: no fixed widths anywhere, so 9.75 and 13.45 both fit in every layout */
.bu .bu-r .pbox .pv{line-height:20px}   /* the price centres by the box's flex alone: ProtoMono's figures sit in the middle of their line, so there is no nudge here (a 2px pad once drew every price 1px low) */
.bu .bu-r .ck{width:14px;height:9px;top:23px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-r.k1 .rar{color:var(--bu-amber);--mark:currentColor}.bu .bu-r.k2 .rar{color:var(--bu-red);--mark:currentColor}
/* ---------- the item hover and the row opened in place (Blur Library: Pattern/Item Hover, and the expanded item row). Both sit in the markup of the row
   that demos them, hidden until the row is told: .pk shows the hover card, .op opens the row. .hv is the pointer over a row ---------- */
.bu .bu-co{position:absolute;pointer-events:none;visibility:hidden}   /* a callout target: a named box a component declares for the deck to point at and magnify */
.bu .bu-r.hv::before,.bu .bu-r.pk::before{opacity:1;transition-duration:.15s}
.bu .bu-r .th{transition:box-shadow .15s ease}
.bu .bu-r.pk .th{box-shadow:0 0 0 1px var(--bu-text)}   /* the avatar under the pointer */
/* what the two share: the picture column and a trait table whose head reads like every table head */
.bu .bu-hover .info,.bu .bu-x .info{flex:none;width:180px}
.bu .bu-hover .im,.bu .bu-x .im{position:relative;width:180px;height:180px}
.bu .bu-hover .im>img:first-child,.bu .bu-x .im>img:first-child{width:180px;height:180px;border-radius:4px}
.bu .mkb{position:absolute;left:8px;top:8px;width:22px;height:22px}   /* the marketplace the listing is on */
.bu .bu-hover .tt,.bu .bu-x .tt{flex:1;min-width:0}
.bu .bu-hover .tr,.bu .bu-x .tr{display:grid;align-items:center;border-bottom:1px solid var(--bu-rule)}
.bu .bu-hover .tr:last-child,.bu .bu-x .tr:last-child{border-bottom:0}
.bu .bu-hover .tr.hd,.bu .bu-x .tr.hd{align-items:start;font-weight:600;text-transform:uppercase;color:var(--bu-muted);--mark:currentColor}
.bu .bu-hover .tr em,.bu .bu-x .tr em,.bu .bu-x .idb em{font-style:normal;color:var(--bu-muted);--mark:currentColor}
.bu .bu-hover .q,.bu .bu-hover .f,.bu .bu-x .q,.bu .bu-x .f,.bu .bu-x .l{text-align:right}
/* the hover card: 722 x 422, beside the avatar */
.bu .bu-hover{left:110px;top:-12px;width:722px;padding:24px 24px 13px;display:flex;gap:24px;border:1px solid var(--bu-rule);border-radius:4px;background:var(--bu-bg);box-shadow:0 24px 60px rgba(0,0,0,.85);z-index:6;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .25s ease,visibility 0s linear .2s}
.bu .bu-r.pk .bu-hover{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease .12s,transform .35s var(--bu-settle,cubic-bezier(.2,.8,.2,1)) .12s,visibility 0s}
.bu .bu-hover .tr.rare .q,.bu .bu-x .tr.rare .q{color:var(--bu-red)}   /* a rare trait: the count in the rarity red, its share with it */
.bu .bu-hover .tr.rare .q em,.bu .bu-x .tr.rare .q em{color:inherit;opacity:.75}
.bu .bu-hover .nm{margin-top:16px;line-height:22px}
.bu .bu-hover .tr{grid-template-columns:104px minmax(0,1fr) 150px 112px;height:42px}
.bu .bu-hover .q{padding-right:18px}   /* air between the count and the floor, so their heads do not read as one */
.bu .bu-hover .tr.hd{height:36px}
/* the opened row: its head lights, the chevron turns, the body drops in under it. 48 + 428 + 8 = 484 */
.bu .bu-r.xr{transition:height .5s var(--bu-settle,cubic-bezier(.2,.8,.2,1))}
.bu .bu-r.xr .ck{transition:transform .3s ease}
.bu .bu-r.op{height:484px}
.bu .bu-r.op::before{opacity:1;background:var(--bu-open);bottom:auto;height:46px}
.bu .bu-r.op .ck{transform:rotate(180deg)}
.bu .bu-r .bu-x{left:14px;right:14px;top:48px;height:428px;padding:20px 16px 0;display:flex;gap:24px;border:1px solid var(--bu-rule);border-top:0;border-radius:0 0 4px 4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.bu .bu-r.op .bu-x{opacity:1;visibility:visible;transition:opacity .35s ease .18s,visibility 0s}
.bu .bu-x .bu-btn.wide{display:flex;width:180px;margin-top:12px}
.bu .bu-x .mks{display:flex;gap:12px;margin-top:14px}.bu .bu-x .mks img{width:24px;height:24px}
.bu .bu-x .idb{margin-top:14px;line-height:20px}.bu .bu-x .idb em{display:block}
.bu .bu-x .tr{grid-template-columns:minmax(0,1fr) 120px 92px 190px;height:46px}
.bu .bu-x .tr.hd{height:32px}
.bu .bu-x .tr .t{line-height:17px}.bu .bu-x .tr .t em{display:block;font-size:12px}
.bu .bu-x .tr .q em{margin-left:8px}
.bu .bu-x .tr .l em{display:inline-block;width:80px;text-align:right}
.bu .bu-btn.ghost{background:none;border:1px solid var(--bu-rule);color:var(--bu-text);--mark:var(--bu-muted)}   /* the secondary action: outlined, in the text colour */
.bu .bu-btn.ghost em,.bu .bu-btn.ghost .v{color:var(--bu-muted);--mark:currentColor}

/* ---------- bottom bar of the main rail (sweep / list) ---------- */
.bu .bu-bar{left:0;top:762px;width:100%;height:62px;border-top:1px solid var(--bu-rule);background:var(--bu-bg)}   /* a pixel past the rail's own bottom edge (61 fills it exactly): at a fractional scale the row behind showed through the last half pixel */
.bu .bu-bar>*{position:absolute}
.bu .bu-bar .bu-optimize{right:291px;top:20px;display:flex;align-items:center;gap:8px}   /* the Optimize toggle and its label hug the sweep box (16 px to its left) */
.bu .bu-bar .bu-optimize>*{position:static}
.bu .bu-sweep{left:563px;top:12px;width:251px;height:36px;border:1px solid var(--bu-rule);border-radius:4px;display:flex}
.bu .bu-sweep .br{width:35px;background:var(--bu-cell);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--bu-rule)}
.bu .bu-sweep .br .ic{width:24px;height:22px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-sweep .n{width:42px;padding:7px 0 0 10px;border-right:1px solid var(--bu-rule)}
.bu .bu-sweep .sl{flex:1;position:relative}
.bu .bu-sweep .sl i{position:absolute;left:18px;right:16px;top:17px;height:1px;background:var(--bu-dim)}
.bu .bu-sweep .sl i.f{right:auto;width:calc(1px + (100% - 48px) * var(--p,0));background:var(--bu-amber)}   /* the bought stretch of the track */
.bu .bu-sweep .sl b{position:absolute;left:calc(11px + (100% - 34px - 14px) * var(--p,0));top:10px;width:15px;height:15px;border:1px solid var(--bu-dim);border-radius:50%;background:var(--bu-bg);transition:background .2s ease,border-color .2s ease}
.bu .bu-sweep .sl.on b{background:var(--bu-amber);border-color:var(--bu-amber)}   /* the knob goes amber once it has been dragged */

/* ---------- right rail: activity feed and depth ---------- */
.bu .bu-rh{top:27px;left:25px;display:flex;align-items:center;gap:11px;font-size:16px}
.bu .bu-rh .ic{width:18px;height:18px}   /* the panel-title icons (activity, listings tag, sales bag) share one 18px box */
.bu .bu-right .bu-chip{position:absolute}
.bu .bu-all{right:27px;top:25px;display:flex;align-items:center;gap:8px;color:var(--bu-text);--mark:var(--bu-muted)}
.bu .bu-all .ic{width:14px;height:9px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-ah{top:64px;left:0;width:100%;height:20px;color:var(--bu-muted);--mark:currentColor;font-weight:600;text-transform:uppercase}
.bu .bu-ah>*{position:absolute}
.bu .bu-feed{left:0;top:108px;width:100%;height:315px;overflow:hidden}
.bu .bu-f{position:relative;height:26px;display:flex;align-items:center}   /* flex only for the two things in flow, the id and a pending badge after it; everything else in a row is placed */
.bu .bu-f>*{position:absolute;top:3px}
.bu .bu-f .th{left:24px;top:5px;width:16px;height:16px;border-radius:2px}
.bu .bu-f .id{position:static;margin-left:48px;min-width:5ch}   /* the slot of a four-digit id (# and four figures), so whatever follows starts at one x in every row */
.bu .bu-f .bu-pend{position:relative;left:auto;top:auto;flex:none;margin-left:5px}   /* a pending badge sits 5px after the id's slot, so the badges in a feed share one vertical line, a shorter id included; the row's flex centres it */
.bu .bu-f .pr{right:164px;text-align:right}
.bu .bu-f .by{right:72px;text-align:right}
.bu .bu-f .bu-chip.gray{left:auto;right:72px;top:3px;width:70px;padding:0}   /* ends on the Buyer column's edge in a rail of any width */
.bu .bu-f .tm{right:24px;text-align:right}
.bu .bu-f.k1 .id{color:var(--bu-red);--mark:currentColor}.bu .bu-f.k2 .id{color:var(--bu-amber);--mark:currentColor}
.bu .bu-dh{top:451px;left:25px;display:flex;align-items:center;gap:11px;font-size:16px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-dh .ic{width:18px;height:15px}
.bu .bu-dh .i-sales{width:16px;height:16px}
.bu .bu-dh .t{display:flex;align-items:center;gap:11px}
.bu .bu-dh .t.on{color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .bu-dh .t.on .ic{filter:drop-shadow(0 0 5px rgba(246,174,45,.9)) drop-shadow(0 0 10px rgba(246,174,45,.5))}
.bu .bu-dh .t+.t{margin-left:9px}
.bu .bu-expand{left:321px;top:453px;width:15px;height:15px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-depth{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.bu .bu-depth-l{position:absolute;left:0;top:0;width:1440px;height:1001px;pointer-events:none;color:var(--bu-muted);--mark:currentColor}
.bu .bu-depth-l span{position:absolute;text-align:right}
.bu .bu-depth-l span.c{width:60px;text-align:center}
.bu .bu-depth text{font-family:var(--bu-font);font-size:14px;fill:var(--bu-muted)}
.bu .bu-depth .ax{stroke:var(--bu-rule);stroke-width:1}
.bu .bu-depth .df{fill:url(#bu-dgrad)}
.bu .bu-depth .dl{fill:none;stroke:var(--bu-chart);stroke-width:2;filter:url(#bu-dglow)}
.bu .bu-depth .dot{fill:rgba(8,4,4,.9);stroke-width:1.5}
.bu .bu-depth .lv .dot{transition:r .3s ease}
.bu .bu-depth .dot.gone{opacity:0}
.bu .bu-depth .dot.hit{animation:bu-dothit .66s ease-out forwards}   /* a listing that just sold: the dot flashes white, swells and goes */
@keyframes bu-dothit{0%{r:4px;fill:#fff;stroke:#fff;opacity:1}30%{r:8px;fill:rgba(255,255,255,.9);stroke:#fff;opacity:1}100%{r:11px;fill:rgba(255,255,255,0);stroke:#fff;opacity:0}}
.bu .bu-depth:not(.sales) .dl,.bu .bu-depth:not(.sales) .df{transition:d .45s cubic-bezier(.3,.6,.2,1)}   /* the book moves a step when the feed changes it */
.bu .bu-depth .dfl{fill:var(--bu-chart);opacity:0;animation:bu-dfl 1.1s ease-in-out both;pointer-events:none}   /* no white: the level an event hits just gets denser in the chart's own colour, then settles back */
@keyframes bu-dfl{0%{opacity:0}28%{opacity:.34}100%{opacity:0}}

/* ---------- status footer ---------- */
.bu .bu-foot{position:absolute;left:0;top:969px;width:1440px;height:32px;border-top:1px solid var(--bu-rule);font-size:12px;font-weight:600;text-transform:uppercase;color:var(--bu-muted);--mark:currentColor}
.bu .bu-foot>*{position:absolute;top:6px}   /* the 12px caps centre on the bar's 31px (the text was a pixel high) */
.bu .bu-foot .d{top:0;width:1px;height:31px;background:var(--bu-rule)}
.bu .bu-foot .ic{top:7px;width:16px;height:16px}
.bu .bu-foot .mk{top:6px;width:20px;height:20px}
.bu .bu-foot .live{color:var(--bu-green);--mark:currentColor;text-shadow:var(--bu-glow-green)}
.bu .bu-foot .live.ic{filter:drop-shadow(0 0 5px rgba(173,226,93,.9))}
.bu .bu-foot .bu-tgl{top:6px}
.bu .bu-foot .amber.ic{filter:drop-shadow(0 0 5px rgba(246,174,45,.9))}

/* ---------- bids ladder ---------- */
.bu .bu-trait{left:24px;display:flex;align-items:center;gap:10px;height:20px}
.bu .bu-b{position:relative;height:50px}
.bu .bu-b>*{position:absolute;top:15px}
.bu .bu-b .bar{left:17px;top:11px;height:28px;background:#2A3016}   /* centred in the 50px row, where the text line is */
.bu .bu-b .pr{left:24px}
.bu .bu-b .num{text-align:right}
.bu .bu-bar .lb b,.bu .bu-bar .lb .v,.bu .bu-optimize .lb{font-weight:400;color:var(--bu-text);--mark:var(--bu-muted)}   /* a value inside a bar label reads in the text colour */
.bu .bu-n{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 4px;margin-left:5px;border:1px solid currentColor;border-radius:3px;font-size:11px;font-style:normal;line-height:1;vertical-align:1px;text-shadow:none}   /* a count in a box, in the text's own colour */

/* ---------- rails of the expanded view ---------- */
.bu .bu-right.clip{height:423px}
.bu .bu-right.lower{top:146px}
.bu .bu-vt{position:absolute;right:24px;top:24px;height:31px;display:flex;border:1px solid var(--bu-rule);border-radius:4px}   /* one grouped switch, the live cell lit amber; explicit heights, so the lit cell's 31 is never left to a percentage */
.bu .bu-vt span{width:36px;height:29px;display:flex;align-items:center;justify-content:center;color:var(--bu-muted);--mark:currentColor}
.bu .bu-vt span.on{margin:-1px;height:31px;border:1px solid var(--bu-amber);border-radius:4px;color:var(--bu-amber);--mark:currentColor;box-shadow:0 0 8px rgba(246,174,45,.45)}   /* the lit cell's border sits on the group's own: 1px outside on every side */
.bu .bu-vt span.on .ic{filter:drop-shadow(0 0 5px rgba(246,174,45,.9))}
.bu .bu-vt .ic{width:15px;height:14px}   /* the masks are cut to the glyph, so the flex centre is the glyph's centre */

/* ---------- portfolio page ---------- */
.bu .bu-head .addr{left:88px;top:46px;font-size:12px;line-height:20px;color:var(--bu-muted);--mark:currentColor}   /* the wallet reads like a collection: ENS name where the name goes, the address small under it with copy and etherscan after it */
.bu .bu-head .pico{left:216px;top:48px;width:29px;height:15px}
.bu .bu-rule.v{width:1px}
.bu .bu-side.pf .chev{left:380px}
.bu .bu-col{left:0;width:420px;height:24px;line-height:20px;padding-top:2px}
.bu .bu-col>*{position:absolute;top:2px}
.bu .bu-col.on::before{content:"";position:absolute;left:14px;right:13px;top:0;height:22px;border-radius:4px;background:var(--bu-sel2)}
.bu .bu-col .ci{left:24px;top:3px;width:18px;height:18px;background:url(colls-strip.png) calc(var(--n) * -18px) 0/360px 18px no-repeat}
.bu .bu-col .cn{left:49px;white-space:nowrap}
.bu .ell{display:inline-block;width:11px;height:3px;margin-left:2px;vertical-align:0;background:radial-gradient(circle at 1.5px 1.5px,currentColor 1.1px,transparent 1.5px) 0 0/3.5px 3px repeat-x}   /* the ellipsis: three crunched dots, drawn, in the text colour */
.bu .bu-col .cv{right:154px}.bu .bu-col .cf{right:82px}.bu .bu-col .cl{right:24px}   /* value, floor, listed: room for 69.80 and 10/10 with air between */
.bu .bu-col.hd .lb{font-size:12px;top:4px}
.bu .bu-col .cv,.bu .bu-col .cf,.bu .bu-col .cl{text-align:right}
.bu .bu-main.pf .bu-rows{overflow:visible}
.bu .bu-r .lp{top:11px;width:76px;height:28px}
.bu .bu-r .lp .no{position:absolute;left:0;right:0;top:4px;text-align:center;color:var(--bu-dim);--mark:currentColor;transition:opacity .3s ease}
.bu .bu-r .lp .pbox{position:absolute;opacity:0;transition:opacity .4s ease}
.bu .bu-r .lp .no{top:1px}
.bu .bu-r .ex .yes{position:absolute;right:0;top:0;opacity:0;transition:opacity .4s ease}
.bu .bu-r .ex .no{color:var(--bu-dim);--mark:currentColor;transition:opacity .3s ease}
/* action buttons: the label sits left and whatever it costs sits right at 72% ink, on every button that has an amount (the sweep's Buy, the portfolio's List, the sheet's List) */
.bu .bu-btn.wide>span{position:absolute;left:9px;right:8px;top:0;line-height:36px;transition:opacity .3s ease}
.bu .bu-btn.wide.row>span{position:static;line-height:36px}
.bu .bu-btn.wide .b0,.bu .bu-btn.wide .b1{display:flex;justify-content:space-between}.bu .bu-btn.wide .b1{opacity:0}
.bu .bu-btn.wide .b0 em{color:var(--bu-dim);--mark:currentColor}   /* the off state carries its zero in the dim ink */
.bu .bu-btn.wide em,.bu .bu-btn.wide .v{font-style:normal;font-weight:400;color:rgba(8,4,4,.72);--mark:currentColor}   /* the figure and its mark at 72% ink */
.bu .sw{position:relative;display:inline-block}.bu .sw .b{position:absolute;right:0;top:0;opacity:0;transition:opacity .4s ease}.bu .sw .a{transition:opacity .4s ease}
.bu .bu-main .dim{position:absolute;inset:0;background:rgba(8,4,4,.62);opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none}
.bu .bu-sheet{position:absolute;left:0;right:0;bottom:0;height:430px;background:var(--bu-bg);z-index:3;border-top:1px solid var(--bu-rule);box-shadow:0 -40px 80px rgba(0,0,0,.7);transform:translateY(calc(100% + 40px));transition:transform .7s var(--bob,cubic-bezier(.2,.8,.2,1))}   /* the one place the spring's overshoot stays */
.bu .bu-sheet::after{content:"";position:absolute;left:0;right:0;top:100%;height:80px;background:var(--bu-bg)}   /* an apron under the sheet: the spring overshoots on the way up, and this keeps the table from showing in the gap */
.bu .bu-sheet .lb{color:var(--bu-muted);--mark:currentColor}
.bu .bu-sheet .sh{position:relative;height:64px;border-bottom:1px solid var(--bu-rule)}
.bu .bu-sheet .sh .t{position:absolute;left:24px;top:22px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;text-transform:uppercase;color:var(--bu-amber);--mark:currentColor;text-shadow:var(--bu-glow-amber)}
.bu .bu-sheet .sh .ic{width:17px;height:17px;filter:drop-shadow(0 0 5px rgba(246,174,45,.9))}
.bu .bu-sheet .sh .x{position:absolute;right:24px;top:24px;width:16px;height:16px}.bu .bu-sheet .sh .x::before,.bu .bu-sheet .sh .x::after{content:"";position:absolute;left:1px;top:7.5px;width:14px;height:1.5px;background:var(--bu-muted);transform:rotate(45deg)}.bu .bu-sheet .sh .x::after{transform:rotate(-45deg)}
.bu .bu-sheet .set{position:relative;height:64px;display:flex;align-items:center;gap:8px;padding:0 24px;border-bottom:1px solid var(--bu-rule)}   /* Set all, four presets and the marketplaces fit the 1020 with the 24 padding kept */
.bu .bu-sheet .set>.lb{margin-right:4px}
.bu .bu-sheet .pre{height:32px;line-height:30px;padding:0 10px;border:1px solid var(--bu-rule);border-radius:4px;color:var(--bu-text);--mark:var(--bu-muted);font-weight:600;text-transform:uppercase}   /* a preset reads in the text colour; the chosen one goes orange */.bu .bu-sheet .pre b{font-weight:400;color:var(--bu-text);--mark:var(--bu-muted);margin-left:4px}
.bu .bu-sheet .pre.on{border-color:var(--bu-orange);color:var(--bu-orange);--mark:currentColor;box-shadow:0 0 8px rgba(255,135,0,.28)}.bu .bu-sheet .pre.on b{color:var(--bu-orange);--mark:currentColor}
.bu .bu-sheet .mk{margin-left:auto;display:flex;align-items:center;gap:8px}.bu .bu-sheet .mk .lb{margin-right:4px}
.bu .bu-sheet .tgl{position:relative;width:36px;height:20px;border-radius:10px;background:var(--bu-bg);box-shadow:inset 0 0 0 1px var(--bu-rule);transition:background .25s ease,box-shadow .25s ease}.bu .bu-sheet .tgl img{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;filter:grayscale(1);opacity:.45;transition:left .25s ease,filter .25s ease,opacity .25s ease}
.bu .bu-sheet .tgl.on{background:var(--bu-rule);box-shadow:none}.bu .bu-sheet .tgl.on img{left:18px;filter:none;opacity:1}   /* a marketplace switch: off, the mark sits left in grey; on, right in colour (Blur is always on; the sell demo switches the others on) */
.bu .bu-sheet .scols,.bu .bu-sheet .sr{position:relative;display:grid;grid-template-columns:40px 1fr 90px 120px 120px 150px 120px;column-gap:16px;align-items:center;padding:0 24px}
.bu .bu-sheet .scols{height:48px;color:var(--bu-muted);--mark:currentColor;font-weight:600;text-transform:uppercase}
.bu .bu-sheet .scols::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--bu-rule)}
.bu .bu-sheet .scols>:nth-child(n+3),.bu .bu-sheet .sr>:nth-child(n+3){text-align:right}
.bu .bu-sheet .sr{height:56px}
.bu .bu-sheet .sr .th{width:40px;height:40px;border-radius:3px}
.bu .bu-sheet .sr .rar{color:var(--bu-muted);--mark:currentColor}.bu .bu-sheet .sr .rar.k1{color:var(--bu-amber);--mark:currentColor}.bu .bu-sheet .sr .rar.k2{color:var(--bu-red);--mark:currentColor}
.bu .bu-sheet .sr .in{justify-self:end;width:120px;height:32px;padding:5px 10px 0 0;border:1px solid var(--bu-rule);border-radius:4px;color:var(--bu-muted);--mark:currentColor;transition:border-color .25s ease,box-shadow .25s ease,color .25s ease}
/* the sheet opens empty (Nov 11): no preset picked, every price at 0 and plain. Picking Below floor (.bf on the page, 14-blur-ui.js) fills the prices
   in orange and the proceeds follow (.v0 is the empty value, .v1 the filled one) */
.bu .bu-sheet .v1{display:none}.bu-portfolio.bf .bu-sheet .v0{display:none}.bu-portfolio.bf .bu-sheet .v1{display:inline}
.bu-portfolio.bf .bu-sheet .sr .in{border-color:var(--bu-orange);box-shadow:0 0 10px rgba(255,135,0,.25);color:var(--bu-text)}
.bu .bu-sheet .sf{position:absolute;left:0;right:0;bottom:0;height:84px;border-top:1px solid var(--bu-rule);display:flex;align-items:center;gap:16px;padding:0 24px}
.bu .bu-sheet .sf .lb{margin-right:12px;font-weight:600;text-transform:uppercase}
.bu .bu-sheet .sf .tot b{font-weight:400;font-size:16px}.bu .bu-sheet .sf .usd{margin-left:12px;color:var(--bu-muted);--mark:currentColor}
.bu .bu-sheet .sf .dur{margin-left:auto;display:flex;align-items:center}.bu .bu-sheet .sf .dur b{display:flex;align-items:center;gap:14px;height:36px;padding:0 12px;border:1px solid var(--bu-rule);border-radius:4px;font-weight:600;text-transform:uppercase}
.bu .bu-sheet .sf .go{width:200px;transition:background .3s ease .12s}
/* the sell flow's states. The demo (14-blur-ui.js) ticks rows one at a time (.tk on a row) and writes the bar's count and total; the page carries .p1 while rows are ticked, .p2 with the sheet up, .p3 once listed */
.bu-portfolio .bu-r.tk::before,.bu-portfolio .bu-r.tk .bu-cb::after{opacity:1}
.bu-portfolio.p1 .bu-btn.wide{background:var(--bu-orange);color:#080404;--mark:currentColor}.bu-portfolio.p1 .bu-btn.wide .b0{opacity:0}.bu-portfolio.p1 .bu-btn.wide .b1{opacity:1}
.bu-portfolio.p2 .dim{opacity:1}
.bu-portfolio.p2 .bu-sheet{transform:none}
.bu-portfolio.p3 .bu-sheet{transform:translateY(calc(100% + 40px));transition-delay:.6s}   /* the sheet waits long enough for its button to read Listed */
.bu-portfolio.p3 .dim{opacity:0;transition-delay:.6s}
/* a clicked button: it dips under the pointer (a touch smaller and darker, back within a third of a second) and keeps its dark ink throughout.
   The one that completes something then turns the done green with a tick and says so (the demo writes Listed); it never greys out, grey is the off state */
@keyframes bu-press{0%{scale:1;filter:none}35%{scale:.96;filter:brightness(.8)}100%{scale:1;filter:none}}
.bu-portfolio.p2 .bu-bar .bu-btn.wide,.bu-portfolio.p3 .sf .go{animation:bu-press .32s ease-out}
.bu-portfolio.p3 .sf .go{background:var(--bu-green);color:#080404;--mark:currentColor}
.bu-portfolio.p3 .sf .go .b::before{content:"";display:inline-block;width:13px;height:10px;margin-right:8px;background:currentColor;-webkit-mask:url(checkmark.svg) center/contain no-repeat;mask:url(checkmark.svg) center/contain no-repeat}
.bu-portfolio.p3 .bu-r.pick .lp .no,.bu-portfolio.p3 .bu-r.pick .ex .no{opacity:0;transition-delay:.9s}
.bu-portfolio.p3 .bu-r.pick .lp .pbox,.bu-portfolio.p3 .bu-r.pick .ex .yes{opacity:1;transition-delay:.9s}
.bu-portfolio.p3 .bu-r.pick::before,.bu-portfolio.p3 .bu-r.pick .bu-cb::after{opacity:0;transition-delay:.9s}
/* a listed row flashes as its price and expiry come in, the rows one after another: the table updating */
.bu-portfolio .bu-r.pick::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,135,0,.16);box-shadow:inset 2px 0 0 var(--bu-orange);opacity:0}
.bu-portfolio.p3 .bu-r.pick::after{animation:bu-rowflash 1.6s ease-out calc(.9s + var(--i,0)*.09s) both}
@keyframes bu-rowflash{0%{opacity:0}9%{opacity:1}100%{opacity:0}}
.bu-portfolio.p3 .bu-bar .bu-btn.wide{background:var(--bu-rule);color:var(--bu-dim);--mark:currentColor;transition-delay:.9s}.bu-portfolio.p3 .bu-bar .bu-btn.wide .b0{opacity:1;transition-delay:.9s}.bu-portfolio.p3 .bu-bar .bu-btn.wide .b1{opacity:0;transition-delay:.9s}   /* the bar's button only, back to its off state with nothing ticked (this used to catch the sheet's List button too and grey its text the moment it was clicked) */
.bu-portfolio.p3 .sw .a{opacity:0;transition-delay:.9s}.bu-portfolio.p3 .sw .b{opacity:1;transition-delay:.9s}

/* ---------- in the deck: pages inside frames, the live feed's motion, the sweep ---------- */
.feat .media>.bu,.b-over .hero>.bu{--k:var(--mk,calc(1000/1440));transition:transform .9s var(--spring,cubic-bezier(.2,.8,.2,1)),opacity .7s ease}
.bu-f.in{animation:bu-fin .45s cubic-bezier(.2,.7,.2,1) both}
.bu-f.in::after{content:"";position:absolute;left:14px;right:14px;top:0;bottom:0;background:rgba(255,255,255,.08);animation:bu-flash 1.4s ease-out both;pointer-events:none}
.bu-f.in::before{content:"";position:absolute;left:17px;top:5px;bottom:5px;width:3px;border-radius:1px;background:var(--rc,#fff);box-shadow:0 0 6px var(--rc,#fff);animation:bu-abar 1.8s cubic-bezier(.3,.6,.2,1) both;z-index:2}   /* the new row's bar: 4px off the picture. It is gone by the time it has drifted about 3px */
.bu-f.k1{--rc:#F95200}.bu-f.k2{--rc:#F6AE2D}
@keyframes bu-fin{from{margin-top:-26px;opacity:0}to{margin-top:0;opacity:1}}
@keyframes bu-flash{from{opacity:1}to{opacity:0}}
@keyframes bu-abar{0%,40%{transform:none;opacity:1}70%{opacity:0}100%{transform:translateX(-6px);opacity:0}}
/* a number that just changed flashes and eases back: white when it only refreshed, green when it went up, red when it went down. The ETH mark beside it
   flashes the same colour (marks always match coloured text). The script sets the classes through window.buTick(el,dir) */
.bu .tick{animation:bu-tick .5s ease-out}
.bu .tick.up{animation:bu-tick-up 1.2s ease-out}.bu .tick.dn{animation:bu-tick-dn 1.2s ease-out}
.bu .tick.up .eth{animation:bu-mark-up 1.2s ease-out}.bu .tick.dn .eth{animation:bu-mark-dn 1.2s ease-out}
@keyframes bu-tick{from{color:#fff}to{}}
@keyframes bu-tick-up{0%,24%{color:var(--bu-green);text-shadow:var(--bu-glow-green)}100%{}}
@keyframes bu-tick-dn{0%,24%{color:var(--bu-red);text-shadow:var(--bu-glow-red)}100%{}}
@keyframes bu-mark-up{0%,24%{background-color:var(--bu-green)}100%{}}
@keyframes bu-mark-dn{0%,24%{background-color:var(--bu-red)}100%{}}
.bu .bu-bar .buy,.bu .bu-bar .avg{opacity:0;transition:opacity .35s ease}
.bu .bu-bar.has .buy,.bu .bu-bar.has .avg{opacity:1}
.bu .bu-bar .buy{background:var(--bu-orange);color:#080404;--mark:currentColor}
.bu .bu-depth .df.sw{fill:rgba(246,174,45,.35)}
/* the charts slide draws into svg.bu-live (2880 x 2048 units over the 1440 page) */
.bu-live{pointer-events:none;z-index:4}
.bu-live .lbl{font-family:var(--bu-font);font-size:28px;fill:#929292;letter-spacing:0}   /* the page's own spacing: the slide's tracked-out caps were leaking in and pushed these labels into each other */
.bu-live .fl{fill:none;stroke:var(--bu-chart);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}   /* every chart draws in --bu-chart */
.bu-live .dot{transition:opacity .6s ease,r .25s ease}
.bu-live .dot.gone{opacity:0}
.bu-live .ring{fill:none;stroke:#fff;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;animation:dotring .9s ease-out forwards}
.bu-live .bar{fill:rgba(var(--bu-chart-rgb),.1);stroke:#FF4E26;stroke-width:2;stroke-linejoin:miter}   /* the library's volume lines: a 1px Orange/400 outline, nearly hollow, lit by its own glow (the b3bar filter, 12-demos.js) */
.bu-live .dl{fill:none;stroke:var(--bu-chart);stroke-width:3;stroke-linejoin:miter}
.bu-live .nowm{fill:var(--bu-chart);stroke:none}
.bu-live .df{fill:rgba(var(--bu-chart-rgb),.18)}
.bu-live .hit{fill:rgba(var(--bu-chart-rgb),.3);animation:dhit 1s ease-out forwards}

/* ---------- the buy-now demo (deck slide bbn; markup from gen.py wallet_pop, driven by 14-blur-ui.js). A cursor, a wallet pop-up and the states one row
   goes through. Everything is hidden or neutral at rest, so a page that carries the demo is the collection page pixel for pixel.
   Row states: bh hover, bp pressed, bw waiting on the wallet, bb bought, bg gone from the listings ---------- */
.bu .bu-cur{position:absolute;left:0;top:0;width:20px;height:28px;z-index:9;opacity:0;pointer-events:none;translate:var(--x,700px) var(--y,600px);transform-origin:0 0;
  transition:translate .9s cubic-bezier(.45,0,.15,1),opacity .25s ease,transform .12s ease;   /* the place is translate, the press is transform: translate applies outside it, so a press never moves the tip */filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M2 1.6v21.2l5.3-5 3.5 8.3 3.3-1.4-3.5-8.2h7.3z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.bu .bu-cur.on{opacity:1}
.bu .bu-cur.dn{transform:scale(.8)}
.bu .bu-mm{position:absolute;right:24px;top:58px;width:300px;z-index:8;border-radius:10px;background:#fff;color:#24272A;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.6);
  font:400 12px/1.3 var(--sans,"Helvetica Neue",Helvetica,Arial,sans-serif);letter-spacing:0;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .25s ease,transform .4s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),visibility 0s linear .25s}
.bu .bu-mm.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .4s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),visibility 0s}
.bu .bu-mm .hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #D6D9DC}
.bu .bu-mm .ac{display:flex;align-items:center;gap:7px;font-weight:500}
.bu .bu-mm .ac i{width:20px;height:20px;border-radius:50%;background:conic-gradient(#F6851B,#E2761B,#CD6116,#F6851B)}
.bu .bu-mm .net{padding:3px 9px;border-radius:11px;background:#F2F4F6;color:#535A61;font-size:11px}
.bu .bu-mm .org{display:inline-block;margin:12px 14px 0;padding:5px 11px;border:1px solid #D6D9DC;border-radius:13px;font-size:11px;color:#535A61}
.bu .bu-mm .what{margin:11px 14px 0;font-size:13px;color:#535A61}
.bu .bu-mm .amt{margin:2px 14px 0;font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.01em}
.bu .bu-mm .amt small{font-size:15px;color:#535A61}
.bu .bu-mm .rw{display:flex;justify-content:space-between;margin-top:12px;padding:11px 14px 0;border-top:1px solid #D6D9DC}
.bu .bu-mm .rw b{display:block;font-weight:600}
.bu .bu-mm .rw em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:#28A745}
.bu .bu-mm .rw.tot em,.bu .bu-mm .rw .r span{color:#535A61}
.bu .bu-mm .rw .r{text-align:right}.bu .bu-mm .rw .r span{display:block;margin-top:3px;font-size:11px}
.bu .bu-mm .bt{display:flex;gap:10px;padding:14px}
.bu .bu-mm .bt span{flex:1;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:background .15s ease,scale .12s ease}
.bu .bu-mm .rej{color:#037DD6;box-shadow:inset 0 0 0 1px #037DD6}
.bu .bu-mm .conf{background:#037DD6;color:#fff}
.bu .bu-mm .conf.dn{background:#0260A4;scale:.97}
.bu .bu-r.bd{overflow:hidden;transition:height .5s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),opacity .35s ease}
.bu .bu-r.bd .pbox{transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .2s ease}
.bu .bu-r.bd .th{transition:box-shadow .3s ease}
.bu .bu-r.bh::before,.bu .bu-r.bp::before,.bu .bu-r.bw::before{opacity:1}
.bu .bu-r.bh .pbox{border-color:var(--bu-orange);color:var(--bu-orange);--mark:currentColor;box-shadow:0 0 10px rgba(255,135,0,.35)}
.bu .bu-r.bp .pbox{background:var(--bu-orange);border-color:var(--bu-orange);color:#080404;--mark:currentColor;box-shadow:0 0 14px rgba(255,135,0,.5)}
.bu .bu-r.bw .pbox{animation:bu-wait 1s ease-in-out infinite}
@keyframes bu-wait{50%{opacity:.55}}
.bu .bu-r.bb::before{opacity:1;background:rgba(173,226,93,.13)}
.bu .bu-r.bb .pbox{border-color:var(--bu-green);color:var(--bu-green);--mark:currentColor;text-shadow:var(--bu-glow-green);font-size:12px;font-weight:600;text-transform:uppercase;box-shadow:0 0 10px rgba(173,226,93,.3)}
.bu .bu-r.bb .pbox .eth{display:none}
.bu .bu-r.bb .th{box-shadow:0 0 0 1px var(--bu-green),0 0 14px rgba(173,226,93,.7)}
.bu .bu-r.bg{height:0;opacity:0}
.bu .bu-f .bu-chip.gray{transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .2s ease}   /* a listing bought from the feed: its Buy now chip goes through the same states as a row's price box */
.bu .bu-f.fh .bu-chip.gray{border-color:var(--bu-orange);color:var(--bu-orange);box-shadow:0 0 10px rgba(255,135,0,.35)}
.bu .bu-f.fp .bu-chip.gray{background:var(--bu-orange);border-color:var(--bu-orange);color:#080404;box-shadow:0 0 14px rgba(255,135,0,.5)}
.bu .bu-f.fw .bu-chip.gray{animation:bu-wait 1s ease-in-out infinite}
.bu .bu-f.fb .bu-chip.gray{border-color:var(--bu-green);color:var(--bu-green);text-shadow:var(--bu-glow-green);box-shadow:0 0 10px rgba(173,226,93,.3)}
.bu .bu-f.mine{--rc:var(--bu-green)}.bu .bu-f.mine .by{color:var(--bu-orange);text-shadow:var(--bu-glow-orange)}
/* a quick return to rest (before a relay, or when the loop starts over): the same states, let go fast */
.bu.rst .bu-r.bd,.bu.rst .bu-r.xr{transition-duration:.25s}.bu.rst .bu-mm,.bu.rst .bu-cur,.bu.rst .bu-hover,.bu.rst .bu-x{transition-duration:.15s;transition-delay:0s}

/* ---------- the filters demo (deck slide bft; page: gen.py collection-filters, rows from birds.py, driven by 14-blur-ui.js). The page opens with nothing
   narrowed down: every bird, rarest first, the attributes closed. The script turns filters on and the table answers. ---------- */
/* rows placed by --row, so a re-sort or a filter slides them to their new places; .out is a bird the current filters leave out */
.bu .bu-rows.abs .bu-r{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(var(--row,0) * var(--rh,50px)));transition:transform .6s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),opacity .3s ease}
.bu .bu-rows.abs .bu-r.out{opacity:0;transition:transform .6s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),opacity .22s ease}
/* ---------- the widescreen layout (.bu.wide, 1920 x 1001): the collection page moved over whole (.bu-shift) with the collections panel in the room
   on its left. Nav and status bar run the full width, their right-hand groups 480 further out ---------- */
.bu.wide{width:1920px}
.bu.wide .bu-nav,.bu.wide .bu-foot{width:1920px}
.bu.wide .bu-search{left:785px}.bu.wide .bu-pts{left:1480px}.bu.wide .bu-loy{left:1566px}.bu.wide .bu-bell{left:1674px}.bu.wide .bu-wallet{left:1718px}
.bu .bu-shift{position:absolute;left:480px;top:0;width:1440px;height:1001px}
.bu .bu-cpanel{position:absolute;left:0;top:62px;width:480px;height:907px;border-right:1px solid var(--bu-rule);overflow:hidden}
.bu .bu-cpanel .bu-ct{grid-template-columns:minmax(0,1fr) 88px 112px}
.bu .bu-cpanel .bu-ct.hd{top:0;height:62px}
.bu .bu-cpanel .bu-ct-rows{top:68px}
.bu .bu-cpanel .bu-ct-rows .bu-ct{height:49px}   /* seventeen rows run the panel to its foot (839px under the head) */
.bu .bu-cpanel .bu-ct .av{width:36px;height:36px}
.bu .bu-cpanel .bu-ct .nm{gap:12px}
.bu .bu-ct.sel::before{opacity:1;background:var(--bu-sel2)}   /* the collection that is open */
.feat .media>.bu.wide{--k:calc(var(--mwn,1000)/1920)}
/* ---------- table views (the views demo, slide bvw). The main rail carries .vw and one of v1 (the list, as everywhere), v2 (the list condensed:
   36px rows, 24px pictures), v3 (large grid, four across) and v4 (small grid, six across). The two lists are the same rows re-spaced; the grids are
   the same birds as cards, which the deck's script sizes and places so they slide from one grid to the other ---------- */
.bu .bu-main.vw .bu-rows,.bu .bu-main.vw .bu-th>*{transition:opacity .25s ease}
.bu .bu-main.vw .bu-r>*{transition:top .45s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.bu .bu-main.v2 .bu-rows{--rh:36px}
.bu .bu-main.v2 .bu-r{height:36px}
.bu .bu-main.v2 .bu-r>*{top:8px}
.bu .bu-main.v2 .bu-r .bu-cb{top:11px}
.bu .bu-main.v2 .bu-r .th{top:6px;width:24px;height:24px}
.bu .bu-main.v2 .bu-r .id{left:94px}
.bu .bu-main.v2 .bu-r .pbox{top:5px;height:26px}
.bu .bu-main.v2 .bu-r .ck{top:16px}
.bu .bu-main.v3 .bu-rows,.bu .bu-main.v4 .bu-rows{opacity:0}
.bu .bu-main.v3 .bu-th>*:not(.bu-cb):not(.cnt),.bu .bu-main.v4 .bu-th>*:not(.bu-cb):not(.cnt){opacity:0}   /* a grid has no columns to head */
.bu .bu-grid{position:absolute;left:24px;top:140px;width:790px;height:0;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.bu .bu-main.v3 .bu-grid,.bu .bu-main.v4 .bu-grid{opacity:1;visibility:visible;transition:opacity .3s ease .12s,visibility 0s}
.bu .bu-card{position:absolute;left:0;top:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1)}
.bu .bu-grid.nt .bu-card{transition:none}
.bu .bu-card img{width:100%;aspect-ratio:1;border-radius:4px;background:#111}
.bu .bu-card .l{display:flex;justify-content:space-between;align-items:center;height:22px;margin-top:8px}
.bu .bu-card .l2{margin-top:2px;font-size:12px;color:var(--bu-muted);--mark:currentColor;transition:opacity .25s ease}
.bu .bu-card .l2 em{font-style:normal;font-weight:600;text-transform:uppercase;margin-right:7px}
.bu .bu-card .l2 .eth{width:10.5px;height:15px;vertical-align:-3px}
.bu .bu-card.k1 .rar{color:var(--bu-amber)}.bu .bu-card.k2 .rar{color:var(--bu-red)}
.bu .bu-card.k1 .rar em,.bu .bu-card.k2 .rar em{color:var(--bu-muted)}
.bu .bu-main.v4 .bu-card .l2{opacity:0}
.bu.rst .bu-card,.bu.rst .bu-grid,.bu.rst .bu-main.vw .bu-rows,.bu.rst .bu-main.vw .bu-r,.bu.rst .bu-main.vw .bu-r>*{transition-duration:.2s;transition-delay:0s}
.bu .bu-r .pbox.no{border-color:transparent;color:var(--bu-dim);--mark:currentColor;padding:0 14px}   /* not listed: a dash where the price would be */
.bu .bu-th .srt:not(.w) .ic{display:none}   /* the arrow shows on the column the table is sorted by */
/* the pointer over a control */
.bu .bu-tg{transition:color .15s ease}.bu .bu-tg.hv{color:#fff}.bu .bu-tg.hv .bu-tgl{border-color:var(--bu-dim)}
.bu .bu-tops span{transition:background .25s ease,box-shadow .25s ease}
.bu .bu-tops span.hv{background:rgba(255,135,0,.18);box-shadow:0 0 16px rgba(255,135,0,.65)}
.bu .bu-opt{transition:color .2s ease}.bu .bu-opt.hv{color:#fff}.bu .bu-opt.off{color:var(--bu-muted);--mark:currentColor}
/* the attributes closed (.gl rows, one per trait type); .ao on the side opens the first: its row lights, its search and values show, the rest move down and out */
.bu .bu-group.gl{background:transparent;transition:transform .45s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),background .2s ease}
.bu .bu-group.gl.hv{background:var(--bu-sel2)}
.bu .bu-group.gl .i-chev-up{display:none}
.bu .bu-side.ao .bu-group.g0{background:var(--bu-open)}
.bu .bu-side.ao .bu-group.g0 .i-chev{display:none}.bu .bu-side.ao .bu-group.g0 .i-chev-up{display:inline-block}
.bu .bu-side.ao .bu-group.gl:not(.g0){transform:translateY(300px)}
.bu .bu-ao{left:0;top:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.bu .bu-ao>*{position:absolute}
.bu .bu-side.ao .bu-ao{opacity:1;visibility:visible;transition:opacity .3s ease .18s,visibility 0s}

/* ---------- the Activity page (gen.py activity). The chart's lines, tags and time axis and the events are drawn live by 14-blur-ui.js ---------- */
.bu .bu-side.ac{top:62px;height:907px}
.bu .bu-side.ac .bu-col{height:28px;padding-top:4px}.bu .bu-side.ac .bu-col>*{top:4px}
.bu .bu-side.ac .bu-col.hd>*{top:4px}
.bu .bu-side.ac .bu-col.on::before,.bu .bu-side.ac .bu-col.hv::before{content:"";position:absolute;left:14px;right:13px;top:1px;height:26px;border-radius:4px;background:var(--bu-sel2)}
.bu .bu-side.ac .bu-col.hv:not(.on)::before{background:var(--bu-sel)}
.bu .bu-side.ac .bu-col .ci{top:5px}   /* a ticked collection is marked by its row's highlight alone: no checkbox, the avatar stays */
.bu .bu-side.ac .bu-col .cf{right:118px}
.bu .bu-side.ac .bu-col .cl{text-shadow:none}
.bu .bu-acm{position:absolute;left:420px;top:62px;width:1020px;height:907px;overflow:hidden}
.bu .bu-acm>*{position:absolute}
.bu .bu-acm .bu-actl{right:24px;top:25px;display:flex;align-items:center;height:22px;font-weight:600;text-transform:uppercase}
.bu .bu-acm .bu-actl .bu-tgl{margin:0 28px 0 10px}
.bu .bu-acm .bu-actl .span{display:flex;align-items:center;gap:8px;margin-right:12px}
.bu .bu-acm .bu-actl .span .ic{width:12px;height:8px;color:var(--bu-muted)}
.bu .bu-acm .bu-actl>.ic{width:14px;height:14px;margin-left:18px;color:var(--bu-muted)}.bu .bu-acm .bu-actl>.ic.on{color:var(--bu-amber)}
.bu .bu-ach{left:0;top:68px;width:1020px;height:340px}
.bu .bu-ach>*{position:absolute}
.bu .bu-ach .yl{left:0;width:60px;text-align:right;color:var(--bu-muted)}
.bu .bu-ach svg{left:0;top:0;width:1020px;height:340px}
.bu .bu-ach .s{transition:opacity .6s ease}.bu .bu-ach .s.off{opacity:0}
.bu .bu-ach .ln{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}   /* the charts page's line: 2px (.bu-live .fl is 4 in 2x units), its glow the same filter recipe (14-blur-ui.js) */
.bu .bu-ach .tags{left:907px;top:0;width:89px;height:340px}
.bu .bu-ach .tag{position:absolute;left:0;top:0;width:89px;height:36px;padding:0 7px 0 10px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;background:var(--c);color:#080404;box-shadow:0 0 18px color-mix(in srgb,var(--c) 50%,transparent);transition:opacity .5s ease;will-change:transform}
.bu .bu-ach .tag b{font-weight:400}
.bu .bu-ach .tag img{width:22px;height:22px;border-radius:50%}
.bu .bu-ach .tag.off{opacity:0}
.bu .bu-ach .xl{left:0;top:286px;width:1020px;height:20px}
.bu .bu-ach .xl span{position:absolute;left:-40px;top:0;width:80px;text-align:center;color:var(--bu-muted)}
.bu .bu-erows{left:0;top:470px;width:1020px;height:437px;overflow:hidden}
.bu .bu-e{position:relative;height:48px}
.bu .bu-e>*{position:absolute;top:14px}
.bu .bu-e .ev{left:24px;display:flex;align-items:center;gap:10px;font-weight:600;text-transform:uppercase}
.bu .bu-e .ev .ic{width:18px;height:18px;color:var(--bu-muted)}
.bu .bu-e .ath{left:136px;top:4px;width:40px;height:40px;border-radius:3px;background-size:320px auto;background-repeat:no-repeat}
.bu .bu-e .id{left:187px;top:5px}
.bu .bu-e .cn{left:187px;top:24px;font-size:12px;color:var(--bu-muted)}
.bu .bu-e .pr{right:702px;text-align:right}
.bu .bu-e .mk{left:330px;top:15px;width:18px;height:18px}
.bu .bu-e .rar{right:570px;color:var(--bu-muted)}.bu .bu-e .rar.k1{color:var(--bu-amber)}.bu .bu-e .rar.k2{color:var(--bu-red)}
.bu .bu-e .tt{right:458px}.bu .bu-e .fr{right:345px}.bu .bu-e .to{right:232px}.bu .bu-e .hd{right:137px}.bu .bu-e .tm{right:24px}
.bu .bu-e.sale .pr{color:var(--bu-red);text-shadow:var(--bu-glow-red)}.bu .bu-e.list .pr{color:var(--bu-green);text-shadow:var(--bu-glow-green)}
.bu .bu-e.sale .tm{color:var(--bu-orange)}
.bu .bu-e.in{animation:bu-ein .45s cubic-bezier(.2,.7,.2,1) both}
.bu .bu-e.in::after{content:"";position:absolute;left:14px;right:14px;top:2px;bottom:2px;background:rgba(255,255,255,.08);animation:bu-flash 1.4s ease-out both;pointer-events:none}
@keyframes bu-ein{from{margin-top:-48px;opacity:0}to{margin-top:0;opacity:1}}

/* ---------- the item page (gen.py item). Left: the picture, 472px. Right: numbers, every trait, the item's history ---------- */
.bu .bu-item{position:absolute;left:0;top:62px;width:1440px;height:907px}
.bu .bu-item>*{position:absolute}
.bu .bu-item .ti{left:24px;top:24px;width:472px;height:58px}
.bu .bu-item .ti>*{position:absolute}
.bu .bu-item .ti .nm{left:0;top:0;font-size:20px;line-height:28px}
.bu .bu-item .ti .cl{left:0;top:34px;display:flex;align-items:center;gap:10px;color:var(--bu-muted)}
.bu .bu-item .ti .cl img{width:24px;height:24px;border-radius:50%}
.bu .bu-item .ti .mks{right:0;top:17px;display:flex;gap:12px}   /* one row, centred on the title block, ending on the picture's right edge */
.bu .bu-item .ti .mks img,.bu .bu-item .act .mk{display:block;width:24px;height:24px}   /* marketplace marks are vectors (mk-*.svg, from the Figma files), so they hold at any size. Back to 24 on Nov 11 (32 was too big); Blur's is the black disc with the wordmark in orange */
.bu .bu-item .pic{left:24px;top:104px;width:472px;height:472px;border-radius:4px;image-rendering:pixelated}
.bu .bu-item .act{left:24px;top:600px;width:472px;height:36px;display:flex;align-items:center;gap:16px}
.bu .bu-item .act .ar{margin-left:auto;display:flex;gap:22px}
.bu .bu-item .act .ar .ic{width:10px;height:15.5px;color:var(--bu-orange)}.bu .bu-item .act .ar .l{transform:rotate(90deg)}.bu .bu-item .act .ar .r{transform:rotate(-90deg)}
.bu .bu-item .st{left:520px;top:24px;width:896px;height:86px;display:flex;justify-content:space-between;align-items:center;padding:0 40px}
.bu .bu-item .st em{display:block;font-style:normal;font-weight:600;text-transform:uppercase;color:var(--bu-muted)}
.bu .bu-item .st b{display:block;margin-top:4px;font-weight:400}
.bu .bu-item .st b.k1{color:var(--bu-amber)}.bu .bu-item .st b.k2{color:var(--bu-red)}.bu .bu-item .st b.plain{text-shadow:none}
.bu .bu-item .pn{left:520px;width:896px;overflow:hidden}
.bu .bu-item .pn>*{position:absolute}
.bu .bu-item .at{top:134px;height:330px}
.bu .bu-item .hi{top:488px;height:395px}
.bu .bu-item .pn .bu-rh{left:24px;top:22px}
.bu .bu-item .pn .bu-views{left:auto;right:24px;top:25px}
.bu .bu-item .trs{left:24px;top:76px;width:848px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bu .bu-item .trs>div{position:relative;height:66px;border:1px solid var(--bu-rule);border-radius:4px}
.bu .bu-item .trs>div>*{position:absolute}
.bu .bu-item .trs em{left:16px;top:11px;font-style:normal;font-weight:600;text-transform:uppercase;color:var(--bu-muted)}
.bu .bu-item .trs em.r{left:auto;right:16px}
.bu .bu-item .trs b{left:16px;top:34px;font-weight:400}
.bu .bu-item .trs .q{right:16px;top:34px}
.bu .bu-item .trs .rare .q{color:var(--bu-red);text-shadow:var(--bu-glow-red)}
/* .evn, not .ev: the deck shell has a bare .ev of its own */
.bu .bu-item .hh,.bu .bu-item .hr{display:grid;grid-template-columns:150px 110px 44px 1fr 150px 150px 110px;align-items:center}
.bu .bu-item .hh{left:24px;top:76px;width:848px;height:20px;font-weight:600;text-transform:uppercase;color:var(--bu-muted)}
.bu .bu-item .hrs{left:24px;top:112px;width:848px}
.bu .bu-item .hr{height:37px}
.bu .bu-item .n{text-align:right}
.bu .bu-item .hr .evn{display:flex;align-items:center;gap:10px;font-weight:600;text-transform:uppercase}
.bu .bu-item .hr .evn .ic{width:18px;height:18px;color:var(--bu-muted)}
.bu .bu-item .hr .mk{display:flex;justify-content:flex-start;padding-left:10px}.bu .bu-item .hr .mk img{display:block;width:18px;height:18px}
.bu .bu-item .hr.sale .pr{color:var(--bu-red);text-shadow:var(--bu-glow-red)}.bu .bu-item .hr.list .pr{color:var(--bu-green);text-shadow:var(--bu-glow-green)}
.bu .bu-item .hr .tm{color:var(--bu-muted)}
.bu .bu-item i.muted{font-style:normal}
/* ---------- collector mode (gen.py collector): the banner, a shorter header over it, and the items as large cards in outlined panels ---------- */
.bu .bu-ban{position:absolute;left:0;top:62px;width:1440px;height:263px;overflow:hidden}
.bu .bu-ban img{display:block;width:1440px;height:325px;margin-top:-62px;image-rendering:pixelated}
.bu .bu-head.cz{top:213px;height:112px;background:rgba(8,4,4,.74);border-top:1px solid var(--bu-rule)}
.bu .bu-head.cz .av{left:24px;top:24px;width:64px;height:64px}
.bu .bu-head.cz .nm{left:112px;top:30px}
.bu .bu-head.cz .star{position:static;margin-left:12px;vertical-align:-1px}
.bu .bu-tgl.lf{background:var(--bu-rule);border-color:var(--bu-rule)}.bu .bu-tgl.lf::after{background:var(--bu-amber);box-shadow:0 0 8px rgba(246,174,45,.8)}   /* the footer's mode switch on its left side (Collect) */
.bu .bu-head.cz .mks{left:112px;top:66px;display:flex;gap:8px}.bu .bu-head.cz .mks img{display:block;width:16px;height:16px}
.bu .bu-head.cz .bu-stat{top:35px}
.bu .bu-side.cz,.bu .bu-main.cz{border:1px solid var(--bu-rule);border-radius:4px}
.bu .bu-cg{left:24px;top:92px;width:1080px;display:grid;grid-template-columns:repeat(4,258px);gap:16px}
.bu .bu-gc{position:relative;height:365px;border:1px solid var(--bu-rule);border-radius:4px;overflow:hidden}
.bu .bu-gc>*{position:absolute}
.bu .bu-gc .im{left:0;top:0;width:256px;height:256px}
.bu .bu-gc .im>*{position:absolute}
.bu .bu-gc .im>img:first-child{left:0;top:0;width:256px;height:256px;image-rendering:pixelated}
.bu .bu-gc .im .mk{left:8px;top:8px;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(8,4,4,.55)}   /* the mark is a solid disc (mk-*.svg), so it reads on any picture; nothing else sits under it */
.bu .bu-gc .im .bu-cb{right:8px;top:8px;left:auto;background:rgba(8,4,4,.85);border-color:rgba(8,4,4,.85)}
.bu .bu-gc .im .rk{right:8px;bottom:8px;padding:2px 6px 1px;border-radius:3px;background:rgba(8,4,4,.85);color:var(--bu-text)}
.bu .bu-gc .im .rk.k1{color:var(--bu-amber)}.bu .bu-gc .im .rk.k2{color:var(--bu-red)}
.bu .bu-gc .id{left:10px;top:270px}
.bu .bu-gc .l,.bu .bu-gc .v{left:10px;right:10px;display:flex;justify-content:space-between}
.bu .bu-gc .l{top:304px}.bu .bu-gc .l em{font-style:normal;font-weight:600;text-transform:uppercase;color:var(--bu-muted)}
.bu .bu-gc .v{top:327px}
/* ---------- the Customize sheet (gen.py modes_overlay), on a clear page laid over the collection: .open shows it, .on marks the picked mode ---------- */
.bu.bu-ovl{background:none}
.bu .bu-dimm{position:absolute;inset:0;background:rgba(8,4,4,.74);opacity:0;transition:opacity .35s ease}
.bu-ovl.open .bu-dimm{opacity:1}
.bu .bu-modal{position:absolute;left:380px;top:232px;width:680px;height:500px;background:var(--bu-bg);border:1px solid var(--bu-rule);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .35s var(--bu-settle,cubic-bezier(.2,.8,.2,1)),visibility 0s linear .35s}
.bu-ovl.open .bu-modal{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .1s,transform .4s var(--bu-settle,cubic-bezier(.2,.8,.2,1)) .1s,visibility 0s}
.bu .bu-modal>*{position:absolute}
.bu .bu-modal .bu-rh{left:25px;top:26px}
.bu .bu-modal .pc{top:70px;width:198px;height:220px;border:1px solid var(--bu-rule);border-radius:4px;overflow:hidden;transition:border-color .2s ease}
.bu .bu-modal .pc .hd{height:108px;padding-top:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid var(--bu-rule);font-weight:600;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.bu .bu-modal .pc .hd b{font-weight:600}   /* the capitals sit in the top of their line, so the pair is set 4px down (padding-top above): the space over the icon equals the space under the letters */
.bu .bu-modal .pc .hd .ic{width:44px;height:44px;color:var(--bu-muted)}
.bu .bu-modal .pc .pt{display:flex;align-items:center;gap:12px;height:30px;padding-left:18px}.bu .bu-modal .pc .pt:first-of-type{margin-top:9px}
.bu .bu-modal .pc .pt .ic{width:14px;height:11px;color:var(--bu-muted)}
.bu .bu-modal .pc.on{border-color:var(--bu-amber)}
.bu .bu-modal .pc.on .hd{background:var(--bu-amber);color:#080404;border-bottom-color:var(--bu-amber)}.bu .bu-modal .pc.on .hd .ic{color:#080404}
.bu .bu-modal .pc.on .pt .ic{color:var(--bu-amber)}
.bu .bu-modal .pc.hv:not(.on){border-color:var(--bu-dim)}
.bu .bu-modal .th{top:346px;width:198px;height:42px;display:flex;align-items:center;gap:14px;padding-left:16px;border:1px solid var(--bu-rule);border-radius:4px;font-weight:600;text-transform:uppercase}
.bu .bu-modal .th i{width:22px;height:22px;border-radius:50%;background:linear-gradient(90deg,#696969 50%,#1E1E1E 50%)}
.bu .bu-modal .th.t1 i{background:linear-gradient(90deg,#929292 50%,#303030 50%)}.bu .bu-modal .th.t2 i{background:linear-gradient(90deg,#E3E3E3 50%,#696969 50%)}
.bu .bu-modal .th.on{border-color:var(--bu-amber);color:var(--bu-amber)}
/* the footer (Nov 11): a rule across the sheet, the sync switch on the left and Apply on the right, the width of a card and under the third one, so
   it sits on the same grid as everything above it. The helper line under the button is gone */
.bu .bu-modal .ft{left:0;right:0;top:412px;height:1px;background:var(--bu-rule)}
.bu .bu-modal .sy{left:24px;top:434px;height:42px;display:flex;align-items:center;gap:10px}
.bu .bu-modal .ap{left:454px;top:434px;width:198px;height:42px;justify-content:center;font-weight:600;text-transform:uppercase;transition:filter .12s ease}
.bu .bu-modal .ap.dn{filter:brightness(.82)}