/* ==========================================================================
   TOKENS. Landing page se same. Naya font ek bhi nahi.
   ========================================================================== */
:root{
  --bg:#050505; --ink:#EDEAE5; --ink-2:#9B9895; --gold:#D3B07C;
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.11);
  --mute:#8B8B8B; --up:#9FE84B; --down:#FF4B4B;
  --display:"Inter Tight","Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --col:1280px; --nav-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* overflow-x yahan `clip` hai, `hidden` nahi.

   `hidden` apne aap ek scroll container bana deta hai, aur uske andar ka har
   position:sticky usi container se chipakne lagta hai, page se nahi. Isi wajah
   se table ka sticky header kaam nahi kar raha tha.

   `clip` bhi bahar nikalta hua content kaat deta hai, par scroll container
   nahi banata, isliye sticky theek chalta hai. */
body{ min-height:100dvh; background:var(--bg); color:var(--ink); font-family:var(--sans);
      overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.is-locked{ overflow:hidden; }
ul{ list-style:none; } a{ color:inherit; text-decoration:none; } svg{ display:block; }
button,input{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip{ position:fixed; top:10px; left:10px; z-index:200; padding:10px 16px;
       border:1px solid var(--gold); border-radius:8px; background:#0d0c0a;
       color:var(--gold); font-size:14px; transform:translateY(-200%);
       transition:transform .2s var(--ease); }
.skip:focus-visible{ transform:none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{ position:sticky; top:0; z-index:20; height:var(--nav-h);
      background:rgba(5,5,5,.88); backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.nav__in{ max-width:var(--col); height:100%; margin-inline:auto; padding-inline:28px;
          display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand svg{ width:24px; height:24px; color:var(--ink); }
.brand span{ font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.022em; }
.links{ display:flex; align-items:center; gap:38px; margin-inline:auto; }
.links a{ font-size:17px; font-weight:450; transition:color .25s var(--ease); }
.links a:hover{ color:var(--gold); }
.links a[aria-current="page"]{ color:var(--gold); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius:999px; font-size:16px; font-weight:500; white-space:nowrap; flex:none;
      transition:transform .3s var(--ease), background-color .3s var(--ease),
                 border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn--light{ height:46px; padding-inline:26px; background:#fff; color:#0A0A0A; }
.btn--light:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(255,255,255,.4); }

.burger{ display:none; width:42px; height:42px; margin-right:-6px; place-items:center; }
.burger i{ display:block; width:19px; height:1.5px; background:var(--ink); border-radius:2px;
           transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger i + i{ margin-top:5px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{ position:fixed; inset:var(--nav-h) 0 0; z-index:15;
         padding:8px clamp(20px,6vw,40px) 40px; background:var(--bg); overflow-y:auto;
         opacity:0; visibility:hidden; transform:translateY(-8px);
         transition:opacity .26s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.drawer.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s; }
.drawer a{ display:block; padding:20px 2px; font-size:19px; border-bottom:1px solid var(--hair); }
.drawer .btn{ width:100%; margin-top:28px; height:52px; }

/* ==========================================================================
   TITLE
   ========================================================================== */
.wrap{ max-width:var(--col); margin-inline:auto; padding-inline:28px; }

.head{ padding:80px 0 44px; text-align:center; }
.head__eyebrow{ font-size:12px; font-weight:500; letter-spacing:.2em;
                text-transform:uppercase; color:var(--gold); }
.head h1{ margin:20px auto 0; max-width:17ch;
  font-family:var(--display); font-size:clamp(38px,5.4vw,76px); font-weight:400;
  line-height:1.03; letter-spacing:-.038em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.head__bio{ margin:28px auto 0; max-width:62ch; font-size:16.5px; line-height:1.68; color:var(--ink-2); }
.head__bio b{ color:var(--ink); font-weight:500; }

/* ==========================================================================
   TOOLBAR
   Search aur ginti ek hi patti mein. Ginti isliye hai ki search karte waqt
   padhne wale ko turant pata chale ki kitna bacha, warna khaali table dekh
   kar lagta hai ki page toot gaya.
   ========================================================================== */
.bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
      padding-bottom:18px; border-bottom:1px solid var(--hair); }

.search{ position:relative; flex:1; min-width:240px; max-width:420px; }
.search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
             width:16px; height:16px; color:#6F6B66; pointer-events:none; }
.search input{
  width:100%; height:46px; padding:0 44px;
  border:1px solid var(--hair-2); border-radius:999px; background:#0B0B0A;
  font-size:14.5px; color:var(--ink);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.search input::placeholder{ color:#6F6B66; }
.search input:focus{ outline:none; border-color:rgba(211,176,124,.45); background:#0F0E0C; }

/* Clear button tabhi dikhta hai jab kuch likha ho. Hamesha dikhne wala cross
   khaali field par ek jhoothi affordance hota hai. */
.search__x{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
            display:none; place-items:center; width:30px; height:30px;
            border-radius:50%; color:#8B8781; font-size:17px; line-height:1; }
.search__x:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.search.has-text .search__x{ display:grid; }

.bar__count{ margin-left:auto; font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
.bar__count b{ color:var(--ink); font-weight:500; }
.bar__live{ display:inline-flex; align-items:center; gap:8px; font-size:12px;
            letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.bar__live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);
                    animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }

/* ==========================================================================
   TABLE
   ========================================================================== */
/* Yahan overflow-x:auto tha, aur wahi sticky header ko tod raha tha: visible
   ke alawa koi bhi overflow value sticky ko us container ke andar qaid kar
   deti hai, isliye header page ke saath chipakne ke bajaye table ke andar
   phansa rehta tha.

   Scroll ki zaroorat waise bhi nahi thi. 900px se neeche .opt columns chhup
   jaate hain aur table apne aap sama jaata hai. */
.tablewrap{ margin-top:2px; padding-bottom:88px; }
/* `fixed`, so the columns come from the header and not from whatever is in the body.

   Under `auto` the browser sizes columns from every row's content, which means the table
   has one geometry while the skeleton is up and a different one once data lands — and the
   loading geometry was badly wrong: measured, the `#` column took 656px of a 1224px table
   and the shimmer bunched into a strip on the left with six hundred pixels of nothing
   beside it. No amount of sizing the placeholder bars fixes that, because the placeholder
   is the thing being measured.

   `fixed` takes the widths from the first row — the header — and applies them to every row
   including the empty ones. Loading and loaded become the same table by construction.

   It costs nothing here. Measured against the auto layout it replaces, the columns land
   within 3px of where they already were ([52,452,171,122,85,183,159] against
   [49,453,171,122,86,184,159]) and no cell overflows, because every cell in this table is
   `white-space:nowrap` tabular figures whose width was never in doubt. */
table{ width:100%; min-width:760px; border-collapse:collapse; table-layout:fixed; }

th,td{ padding:14px 16px; text-align:right; font-size:14.5px; white-space:nowrap;
       border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; }
th:first-child,td:first-child{ text-align:left; padding-left:4px; width:52px; color:#6F6B66; font-size:13px; }

/* The columns are proportioned by the HEADER, not by whatever happens to be in the body.

   `table-layout` is auto here, so without a stated proportion the browser hands the slack
   to whichever column's content asks loudest — and while the skeleton is up, none of them
   asks for much. Measured on the loading state: the `#` column took 656px of a 1224px
   table and the other six shared what was left, so the shimmer bunched into a strip on
   the left with six hundred pixels of nothing beside it.

   These percentages are the proportions the loaded table settles on by itself, written
   down. Stating them costs the loaded table nothing — it lands where it landed before —
   and it means the skeleton and the data occupy the same columns, which is the only way
   the load stops being a re-layout.

   They are percentages rather than pixels so the table still adapts, and they do not sum
   to 100: the `#` column is the missing 4% and it is fixed at 52px, because a rank is two
   characters at every window width. */
thead th:nth-child(2){ width:40%; }   /* Asset      — a name and a ticker              */
thead th:nth-child(3){ width:20%; }   /* Price      — "$0.00001234", the longest figure */
thead th:nth-child(4){ width:16%; }   /* 24h        — "-12.34%"                         */
thead th:nth-child(5){ width:20%; }   /* Volume 24h — "$3.21B"                          */

/* Five columns now that 7d and Market cap are gone, and the tight case is the one to
 * proportion for: below 900px `.opt` hides Volume too and four columns split the table.
 *
 * At 880px these land near 352/176/141/176, every one comfortably wider than the longest
 * value it holds — the widest is an eleven-character price like "$0.00001234" at about
 * 95px. They do not sum to 100 because the `#` column is the missing 4% and is fixed at
 * 52px: a rank is two characters at every window width. */
th:nth-child(2),td:nth-child(2){ text-align:left; }
td:last-child,th:last-child{ padding-right:4px; }

/* Sticky header.

   z-index 5 chahiye, 1 nahi: har <tr> apna stacking banata hai, aur 1 par
   rows header ke upar se guzar jaati thi.

   Background ka rang seedha likha hai, var(--bg) nahi. Sticky header ke
   peeche rows guzarti hain, aur agar rang kisi bhi wajah se resolve na ho to
   header paardarshi ho jaata hai aur do lines ek doosre par chhap jaati hain.
   Yahi screenshot wala bug tha. */
thead th{
  position:sticky; top:var(--nav-h); z-index:5;
  padding-block:16px; background:#050505;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); border-bottom:1px solid var(--hair-2);
}

/* Sirf woh columns click hote hain jinme ginti ho. Naam wale column par sort
   ka ishara dena aur phir kuch na hona sabse buri baat hoti hai. */
thead th button{ display:inline-flex; align-items:center; gap:7px; color:inherit;
                 font:inherit; letter-spacing:inherit; text-transform:inherit;
                 transition:color .25s var(--ease); }
thead th button:hover{ color:var(--ink); }
thead th button::after{ content:"↕"; font-size:11px; opacity:.4; }
thead th button[data-dir="desc"]::after{ content:"↓"; opacity:1; color:var(--gold); }
thead th button[data-dir="asc"]::after{ content:"↑"; opacity:1; color:var(--gold); }
thead th button[data-dir]{ color:var(--ink); }

tbody tr{ position:relative; z-index:0; transition:background-color .2s var(--ease); }
tbody tr:hover{ background:rgba(211,176,124,.04); }

.asset{ display:flex; align-items:center; gap:12px; }
/* `.mark` covers both: the `<img>` where we ship a logo file and the monogram
   `<span>` where we do not. Same disc either way, so a row with a logo and a
   row without line up. */
.asset .mark{ flex:none; width:28px; height:28px; border-radius:50%;
              background:rgba(255,255,255,.06); object-fit:cover; }
.asset .mark--text{ display:grid; place-items:center;
                    color:#C9C4BC; font-size:10.5px; font-weight:600;
                    letter-spacing:.02em; }
/* A long name truncates rather than setting the table's proportions.

   "Artificial Superintelligence Alliance" is 37 characters of `white-space:nowrap`, and
   under the old auto layout that one row is what made the Asset column 452px wide on every
   screen — one coin deciding the geometry for forty. Under `table-layout:fixed` it would
   instead spill into the Price column, so it is clipped with an ellipsis and carries its
   full name in a `title` (assets.js) for anyone who wants it.

   `min-width:0` on both the flex container and the child is what makes the ellipsis
   possible at all: a flex item's default `min-width:auto` refuses to shrink below its
   content, so `text-overflow` never gets a box narrow enough to trigger in. */
.asset{ min-width:0; }
.asset b{ font-weight:500; color:var(--ink);
          min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset span{ margin-left:2px; font-size:12.5px; color:#7E7A75; text-transform:uppercase; }

/* A column we cannot sort says so. Without this the button still highlights on
   hover and does nothing, which reads as a broken table rather than as missing
   data. */
thead button[disabled]{ opacity:.4; cursor:default; }
thead button[disabled]:hover{ color:inherit; }

.px{ color:var(--ink); }
.is-up{ color:var(--up); }
.is-down{ color:var(--down); }
.dim{ color:var(--ink-2); }

/* ==========================================================================
   STATES
   Teen haal: load ho raha hai, kuch nahi mila, aur data hi nahi aaya. Teenon
   ke liye alag jagah rakhi hai, kyunki teenon ka matlab alag hai aur padhne
   wale ko pata hona chahiye ki galti kiski hai.
   ========================================================================== */
/* A skeleton the shape of the table it stands in for.

   Every bar used to be 64px — 120px in the name column — against columns two to three
   hundred pixels wide, with no bar at all in the rank column. Because the table is
   `table-layout:auto`, the columns then sized themselves to the stubs: the loading state
   was a narrow ladder of shimmer down the left of a full-width table, and the whole thing
   re-laid-out the moment the first real row landed.

   Percentages do not fix this and make it worse. `width:84%` inside an auto-layout cell is
   circular — the cell is asking the content how wide to be while the content asks the cell
   — and resolves to zero. Measured on the attempt: 32px columns holding 0px bars.

   So each column's bar is the pixel width of the value that will replace it. Those numbers
   are stated here, next to the columns, because that is the only place they mean anything:
   change what a column holds and its skeleton is wrong until this changes with it.

   `--s` comes from the row and scales all of them by a few percent, so the bars vary the
   way real figures do instead of ruling a perfect grid. */
.skel td{ height:57px; }
.skel span{ display:block; height:11px; border-radius:3px;
            background:linear-gradient(90deg,#111110 25%,#1A1917 37%,#111110 63%);
            background-size:400% 100%; animation:shimmer 1.5s linear infinite; }

/* Right-aligned like every figure in the table. */
.skel td span{ margin-left:auto; width:calc(var(--w,60px) * var(--s,1)); }

.skel td:first-child span { --w:18px;  margin-left:0; }  /* # — a rank, two digits */
.skel td:nth-child(3) span{ --w:96px; }                  /* Price — "$63,604.80"   */
.skel td:nth-child(4) span{ --w:58px; }                  /* 24h — "-5.65%"         */
.skel td:nth-child(5) span{ --w:66px; }                  /* Volume 24h — "$3.21B"  */

/* The name column: the disc, then the name beside it, laid out exactly like `.asset` so
   the two states measure the same. The disc is the widest fixed thing in the row and
   leaving it out is most of why the column collapsed.

   The flex box is an inner `<span>`, NOT the `<td>`. `display:flex` on a table cell takes
   it out of the table's column algorithm entirely — the browser wraps it in an anonymous
   cell — and the column stops contributing its width to the row. Measured with the flex on
   the td: the seven cells added up to 988px inside a 1224px table, so 236px of the loading
   state was simply blank on the right. Which is the bug this section is about, reintroduced
   one line lower down. */
.skel__cell{ display:flex; align-items:center; gap:12px; }
.skel td:nth-child(2) span{ --w:118px; margin-left:0; flex:none; }
.skel__mark{ flex:none; width:28px; height:28px; border-radius:50%; }

@keyframes shimmer{ to{ background-position:-135% 0 } }

@media (prefers-reduced-motion:reduce){
  /* Still a placeholder, just not a moving one. Removing the bars entirely would give
     back the empty table this was written to avoid. */
  .skel span{ animation:none; background:#141312; }
}

.state{ padding:70px 20px; text-align:center; }
.state h3{ font-family:var(--display); font-size:19px; font-weight:500;
           letter-spacing:-.02em; color:#EFEBE4; }
.state p{ margin:10px auto 0; max-width:44ch; font-size:14px; line-height:1.65; color:var(--mute); }
.state button{ margin-top:20px; height:42px; padding-inline:22px;
               border:1px solid var(--hair-2); border-radius:999px;
               font-size:14px; font-weight:500; color:var(--ink);
               transition:border-color .25s var(--ease), background-color .25s var(--ease); }
.state button:hover{ border-color:rgba(211,176,124,.45); background:rgba(211,176,124,.07); }

.foot-note{ padding:0 0 80px; font-size:12.5px; line-height:1.7; color:#7E7A75; max-width:80ch; }
.foot-note a{ color:var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--hair); }
.foot__in{ max-width:var(--col); margin-inline:auto; padding:56px 28px 0; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr)); gap:44px 32px; }
.foot__brand p{ margin-top:20px; max-width:30ch; font-size:14px; line-height:1.62; color:var(--ink-2); }
.foot__brand small{ display:block; margin-top:12px; font-size:14px; color:#7E7A75; }
.foot__col h4{ font-family:var(--display); font-size:15px; font-weight:600;
               letter-spacing:-.014em; color:var(--ink); }
.foot__col ul{ margin-top:22px; display:grid; gap:14px; }
.foot__col a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px;
              color:#A5A19B; transition:color .25s var(--ease); }
.foot__col a:hover{ color:var(--ink); }
.foot__col a.is-ext::after{ content:"↗"; font-size:12px; color:#6F6B66;
  transition:color .25s var(--ease), transform .25s var(--ease); }
.foot__col a.is-ext:hover::after{ color:var(--gold); transform:translate(1px,-1px); }
.foot__warn{ margin-top:44px; padding:24px 0 28px; border-top:1px solid var(--hair);
             display:grid; gap:14px; font-size:12px; line-height:1.75; color:#8A8680; }
.foot__warn b{ color:#ADA8A1; font-weight:500; }

/* ==========================================================================
   RESPONSIVE
   Tang screen par 7d aur volume chhup jaate hain. Table ko side mein scroll
   karwane se behtar hai kam columns dikhana: price aur 24h hi wo do cheezein
   hain jinke liye log is page par aate hain.
   ========================================================================== */
@media (max-width:900px){
  th.opt,td.opt{ display:none; }
  table{ min-width:0; }
}
@media (max-width:860px){
  :root{ --nav-h:70px; }
  .links{ display:none; }
  .burger{ display:grid; }
  .nav__in{ padding-inline:20px; }
  .nav .btn--light{ height:40px; padding-inline:18px; font-size:14.5px; }
  .wrap{ padding-inline:20px; }
  .head{ padding:52px 0 32px; }
  .bar{ gap:12px; }
  .search{ max-width:none; }
  .bar__count{ margin-left:0; }
  th,td{ padding:12px 10px; font-size:14px; }
  th:first-child,td:first-child{ display:none; }
  .asset .mark{ width:24px; height:24px; }
  .foot__in{ padding:44px 20px 0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; }
}
/* Below 600px the two figure columns stop being a share of the table and become their own
   width, and the name gives up whatever is left.

   Percentages are right while there is slack to divide. There is not, down here. Measured on
   a 390px viewport with the rules above applied — 41 rows of the live catalogue, the widest
   value in each column:

     Price   content box 72px, "$0.00387800" needs 95px   — 23px overflowing
     24h     content box 54px, "-11.69%" needs 63px       —  9px overflowing

   Both are `white-space:nowrap`, right-aligned, and have no ellipsis, so the overflow does
   not truncate: it spills LEFT, out of the cell, underneath the name beside it. A price with
   a coin's name printed through it is worse than a price that is cut off, because it still
   looks like a number.

   116px and 84px are those measurements plus the 10px padding either side. They are stated
   in pixels rather than percent because what they have to hold is a fixed number of
   characters — eleven for the longest price this catalogue quotes, seven for a percentage —
   at a fixed type size, and neither depends on how wide the window is. The name column takes
   the remainder and ellipsises, which it already does by design; a truncated name is still a
   name, and the logo beside it says which asset this is regardless.

   The `#` column is already hidden at 860px, so three columns divide the table here. */
@media (max-width:600px){
  thead th:nth-child(2){ width:auto; }
  thead th:nth-child(3){ width:116px; }
  thead th:nth-child(4){ width:84px; }
}

@media (max-width:520px){ .foot__grid{ grid-template-columns:minmax(0,1fr); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   NAVIGATION CONTROLS
   Same category navigation as the landing and rulebook pages.
   ========================================================================== */
.nav{ position:relative; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.links{ gap:46px; }
.links a{ color:var(--ink); white-space:nowrap; }
.nav-auth{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-auth .btn{ width:110px; }
.btn--login{ height:46px; padding-inline:20px; border:1px solid var(--hair-2); background:transparent; color:var(--ink); }
.btn--login:hover{ border-color:rgba(211,176,124,.55); color:var(--gold); background:rgba(211,176,124,.06); }
.nav-item{ position:relative; }
.nav-trigger{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 13px;
  border:1px solid transparent; border-radius:999px; color:var(--ink); font:inherit;
  font-size:17px; font-weight:450; cursor:pointer;
  transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease); }
.nav-trigger svg{ width:12px; height:12px; transition:transform .3s var(--ease); }
.nav-item:hover .nav-trigger,.nav-item:focus-within .nav-trigger,.nav-item.is-open .nav-trigger,
.nav-trigger[aria-expanded="true"]{ color:#F3EFE8; background:linear-gradient(180deg,#1A1712 0%,#0F0D0B 100%);
  border-color:rgba(211,176,124,.34); box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05); }
.nav-item:hover .nav-trigger svg,.nav-item:focus-within .nav-trigger svg,.nav-item.is-open .nav-trigger svg,
.nav-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-menu{ position:absolute; top:calc(100% + 8px); left:50%; z-index:30; display:grid; gap:4px;
  min-width:252px; padding:12px; border:1px solid rgba(211,176,124,.2); border-radius:18px;
  background:linear-gradient(150deg,rgba(22,20,17,.98) 0%,rgba(8,8,8,.99) 78%);
  box-shadow:0 26px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden;
  pointer-events:none; transform:translate(-50%,-7px); transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .28s; }
.nav-menu::before{ content:""; position:absolute; top:-9px; left:0; right:0; height:10px; }
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu,.nav-item.is-open .nav-menu,
.nav-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
.nav-menu a{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 14px;
  border-radius:11px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:#D8D4CC;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease); }
.nav-menu a::after{ content:"↗"; opacity:0; color:var(--gold); transform:translate(-4px,4px); transition:opacity .25s var(--ease),transform .25s var(--ease); }
.nav-menu a:hover,.nav-menu a:focus-visible{ background:rgba(211,176,124,.11); color:#F5F2ED; transform:translateX(2px); }
.nav-menu a:hover::after,.nav-menu a:focus-visible::after{ opacity:1; transform:none; }
.drawer-group{ border-bottom:1px solid var(--hair); }
.drawer-trigger{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 2px;
  border:0; background:none; color:var(--ink); font:inherit; font-size:19px; text-align:left; cursor:pointer; }
.drawer-trigger svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.drawer-group.is-open .drawer-trigger{ color:var(--gold); }
.drawer-group.is-open .drawer-trigger svg{ transform:rotate(180deg); }
.drawer-submenu{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease),opacity .25s var(--ease); }
.drawer-group.is-open .drawer-submenu{ max-height:280px; opacity:1; }
.drawer-submenu a{ padding:12px 2px 12px 20px; border:0; font-size:15px; color:var(--ink-2); }
.drawer-submenu a:hover{ color:var(--gold); }
.drawer-auth{ display:none; }
@media (max-width:1040px){ .links{ gap:30px; } }
@media (max-width:860px){
  .links,.nav-auth{ display:none; }
  .drawer-auth{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:28px; }
  .drawer-auth .btn{ height:50px; margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .nav-trigger,.nav-trigger svg,.nav-menu,.nav-menu a,.nav-menu a::after,
  .drawer-trigger svg,.drawer-submenu{ transition-duration:.001ms !important; }
}

/* Keep the market column headings pinned to the viewport while the list scrolls. */
thead th{ top:0; }