*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:15px;line-height:1.55;font-weight:400}
img{display:block;max-width:100%}
figure{margin:0}
a{text-underline-offset:3px}
p{margin:0 0 13.2px}
h1,h2,h3,h4,h5,h6{line-height:1.12;letter-spacing:-.015em;margin:0 0 8.8px}
h1{font-size:42px}h2{font-size:32px}h3{font-size:25px}h4{font-size:20px}h5{font-size:16px}h6{font-size:13px}
:focus{outline:none}

:root{
  --ink:#08090B;--ink2:#0B0C0E;--card:#14171B;--card2:#1B1F24;
  --line:rgba(var(--wash),calc(.08 * var(--washx)));--line2:rgba(var(--wash),calc(.16 * var(--washx)));
  --tx:#F3F2EF;--tx2:rgba(var(--txrgb),.60);--tx3:rgba(var(--txrgb),.34);
  --gold:#FFD84D;--goldsoft:rgba(var(--goldrgb),.12);
  --up:#3ECF8E;--down:#F0645B;--info:#63A9FF;
  --fd:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --fb:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --wash:255,255,255;--washx:1;--shade:0,0,0;--shadex:1;
  --txrgb:243,242,239;--goldrgb:255,216,77;--inkrgb:8,9,11;--scrim:4,5,6;
  --goldtx:var(--gold);--goldhi:#FFE375;--ongold:#0A0A0A;
  --ph1:#1C2126;--ph2:#0D0F12;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#EDF0F5;--ink2:#F4F6FA;--card:#FFFFFF;--card2:#F6F8FC;
  --tx:#121721;--txrgb:18,23,33;
  --wash:16,22,32;--washx:2;--shade:88,102,122;--shadex:.30;
  --inkrgb:237,240,245;--scrim:24,30,42;
  --gold:#F2C21A;--goldrgb:198,146,0;--goldtx:#8A6200;--goldhi:#6E4E00;--ongold:#1A1400;
  --up:#0B8558;--down:#BE3A31;--info:#1C68CC;
  --ph1:#E6EAF1;--ph2:#F2F5F9;
  color-scheme:light;
}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.022em;line-height:1.08;margin:0}
p{margin:0}
a{color:var(--goldtx);text-decoration:none}
a:hover{color:var(--goldhi)}
::selection{background:rgba(var(--goldrgb),.28)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input,textarea,select,button{font-family:var(--fb)}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--wash),calc(.16 * var(--washx))) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--wash),calc(.14 * var(--washx)));border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--wash),calc(.26 * var(--washx)));background-clip:content-box}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}70%{box-shadow:0 0 0 8px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:.8}}
.ri{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:11px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--tx3);transition:background .16s,color .16s,padding-left .16s}
.ri:hover{background:rgba(var(--wash),calc(.05 * var(--washx)));color:var(--tx);padding-left:15px}
.rg{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--wash),calc(.22 * var(--washx)));padding:16px 12px 6px;font-weight:700}
.nv{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;font-size:13px;font-weight:600;cursor:pointer;color:var(--tx2);transition:background .15s,color .15s;position:relative;white-space:nowrap}
.nv:hover{background:rgba(var(--wash),calc(.05 * var(--washx)));color:var(--tx)}
.nv svg{flex:none;opacity:.85}
.ng{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--wash),calc(.2 * var(--washx)));padding:18px 13px 7px;font-weight:700;white-space:nowrap}
nav[data-collapsed]{width:64px !important;min-width:64px;max-width:64px}
[data-collapsed] .nv{justify-content:center;padding:11px 0}
[data-collapsed] .nv .lb{position:absolute;left:calc(100% + 10px);background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:6px 11px;font-size:12px;color:var(--tx);box-shadow:0 12px 30px rgba(var(--shade),calc(.55 * var(--shadex)));opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none;z-index:90}
[data-collapsed] .nv:hover .lb{opacity:1;visibility:visible;transform:translateX(0)}
[data-collapsed] .ng{padding:16px 0 7px;font-size:0}
[data-collapsed] .ng::after{content:'';display:block;width:18px;height:1px;background:rgba(var(--wash),calc(.12 * var(--washx)));margin:0 auto}
[data-collapsed] .hideC{display:none}
[data-collapsed] .ctrC{justify-content:center;padding-left:0}
.nvtoggle{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;cursor:pointer;flex:none;transition:background .15s}
.nvtoggle:hover{background:rgba(var(--wash),calc(.09 * var(--washx)))}
.nvtoggle svg{transition:transform .28s cubic-bezier(.16,.8,.3,1)}
[data-collapsed] .nvtoggle svg{transform:rotate(180deg)}
.crd{background:var(--card);border:1px solid var(--line);border-radius:18px}
.lift{transition:transform .24s cubic-bezier(.16,.8,.3,1),border-color .24s,background .24s}
.lift:hover{transform:translateY(-4px);border-color:var(--line2);background:var(--card2)}
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;border:1px solid transparent;padding:10px 19px;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;white-space:nowrap}
.b:active{transform:translateY(1px)}
.bg{background:var(--gold);color:var(--ongold)}
.bg:hover{background:var(--goldhi);box-shadow:0 8px 26px rgba(var(--goldrgb),.26)}
.bo{border-color:var(--line2);color:var(--tx);background:transparent}
.bo:hover{background:rgba(var(--wash),calc(.07 * var(--washx)));border-color:rgba(var(--wash),calc(.3 * var(--washx)))}
.bt{color:var(--tx2);background:transparent;padding:10px 12px}
.bt:hover{color:var(--goldtx)}
.bs{padding:6px 14px;font-size:12px}
.tg{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.t-up{background:rgba(62,207,142,.14);color:var(--up)}
.t-dn{background:rgba(240,100,91,.14);color:var(--down)}
.t-gd{background:var(--goldsoft);color:var(--goldtx)}
.t-nu{background:rgba(var(--wash),calc(.06 * var(--washx)));color:var(--tx2)}
.t-in{background:rgba(99,169,255,.14);color:var(--info)}
.t-ol{border:1px solid var(--line2);color:var(--tx2)}
.inp{width:100%;background:rgba(var(--wash),calc(.04 * var(--washx)));border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--tx);font-size:13.5px;outline:none;transition:border-color .16s,background .16s;box-sizing:border-box}
.inp::placeholder{color:var(--tx3)}
.inp:focus{border-color:var(--goldtx);background:rgba(var(--wash),calc(.06 * var(--washx)))}
.ta{border-radius:16px;min-height:90px;resize:vertical}
.lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px;font-weight:700}
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);font-weight:700;white-space:nowrap}
.tb td{padding:13px 12px;border-bottom:1px solid rgba(var(--wash),calc(.05 * var(--washx)));color:var(--tx2);vertical-align:middle}
.tb tbody tr{transition:background .14s}
.tb tbody tr:hover{background:rgba(var(--wash),calc(.03 * var(--washx)))}
.tb tbody tr:last-child td{border-bottom:none}
.tb .nm{color:var(--tx);font-weight:700}
.ico{width:30px;height:30px;border-radius:9px;background:rgba(var(--wash),calc(.05 * var(--washx)));border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,border-color .15s}
.ico:hover{background:rgba(var(--wash),calc(.1 * var(--washx)));border-color:var(--line2)}
.sg{display:inline-flex;background:rgba(var(--wash),calc(.05 * var(--washx)));border:1px solid var(--line);border-radius:999px;padding:3px}
.sg span{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;transition:background .16s,color .16s}
.sg span:hover{color:var(--tx)}
.sg span[data-on]{background:var(--gold);color:var(--ongold)}
.kh{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.kv{font-family:var(--fd);font-size:29px;font-weight:600;margin-top:8px;line-height:1}
.sw{display:inline-block;vertical-align:middle;position:relative;width:38px;height:21px;border-radius:999px;background:rgba(var(--wash),calc(.12 * var(--washx)));cursor:pointer;flex:none;transition:background .2s}
.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:999px;background:var(--tx);transition:transform .2s}
.sw[data-on]{background:var(--gold)}
.sw[data-on]::after{transform:translateX(17px);background:var(--ongold)}
.pg{animation:fade .34s cubic-bezier(.16,.8,.3,1) both}
.dr{width:7px;height:7px;border-radius:999px;flex:none}
.gradtxt{background:linear-gradient(96deg,var(--tx) 0%,var(--goldhi) 46%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-plan="Premium"] .eliteOnly{display:none}


.ph{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;
  background:
    linear-gradient(135deg,rgba(var(--goldrgb),.08),rgba(var(--goldrgb),0) 55%),
    repeating-linear-gradient(90deg,rgba(var(--wash),calc(.04 * var(--washx))) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(0deg,rgba(var(--wash),calc(.03 * var(--washx))) 0 1px,transparent 1px 36px),
    linear-gradient(160deg,var(--ph1),var(--ph2) 72%)}
.ph-c{position:absolute;left:8%;right:8%;bottom:16%;width:84%;height:42%;color:rgba(var(--goldrgb),.30)}
.ph-l{position:relative;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--txrgb),.30);padding:5px 11px;border:1px solid rgba(var(--wash),calc(.10 * var(--washx)));border-radius:999px;
  background:rgba(var(--inkrgb),.42);text-align:center;max-width:82%}
:where(*):has(> .ph){position:relative}
.tblx{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
:where(*):has(.tblx){min-width:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ongold);
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:700;font-size:13px}
.skip:focus{left:0}


.app{display:flex;min-height:100vh;background:var(--ink,#0A0B0D)}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-body{flex:1;min-width:0;overflow:auto}
nav.mnav{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;transition-property:width;transition-duration:.16s}
nav.mnav::-webkit-scrollbar{width:9px}
nav.mnav::-webkit-scrollbar-thumb{background:rgba(var(--wash),calc(.13 * var(--washx)));border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
nav.mnav[data-collapsed] .hideC{display:none}
nav.mnav[data-collapsed] .lb{display:none}
nav.mnav[data-collapsed] .ng{opacity:0;height:6px;overflow:hidden}
a.nv{text-decoration:none;color:inherit}
/* An article read inside the member area. The marketing site styles these
   classes in its own sheet; the member area needs its own copy, kept small
   and to this design's tokens rather than imported wholesale. */
.ar-body{font-size:15px;line-height:1.75;color:var(--tx2)}
.ar-body .ar-p{margin:0 0 16px}
.ar-body .ar-h2{font-family:var(--fd);font-size:22px;font-weight:600;color:var(--tx);margin:28px 0 12px}
.ar-body .ar-h3{font-family:var(--fd);font-size:17px;font-weight:600;color:var(--tx);margin:22px 0 10px}
.ar-body strong{color:var(--tx);font-weight:700}
@media (max-width:820px){
  .app{flex-direction:column}
  nav.mnav{position:static;height:auto;width:100% !important}
}

/* ── revealing a password ────────────────────────────────────────────────
   The console solved this first; the member area had the same field and none
   of the answer. Both halves matter.

   The control carries an opaque chip rather than sitting as bare text or a
   bare icon on the field. A translucent control is only legible while the
   field behind it stays dark — which is exactly the assumption Chrome breaks
   below. Dark chip, light text, legible on anything. */
.pw{position:relative;display:flex}
.pw .inp{padding-right:66px;width:100%}
.pw-t{position:absolute;right:5px;top:50%;transform:translateY(-50%);height:28px;padding:0 11px;
  border:0;background:var(--card2);cursor:pointer;border-radius:999px;color:var(--tx);
  display:grid;place-items:center;font-family:inherit;z-index:2}
.pw-t:hover{background:var(--card2)}
.pw-t:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pw-t::before{content:"Show";font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pw-t[aria-pressed="true"]::before{content:"Hide"}

/* Chrome paints an autofilled field with its own near-white background and
   ignores the panel colour. Nothing switches it off, so the fill is covered
   with an inset shadow and the text colour forced. The absurd transition
   delay stops Chrome re-applying its colour a frame later. */
.inp:-webkit-autofill,
.inp:-webkit-autofill:hover,
.inp:-webkit-autofill:focus,
.inp:-webkit-autofill:active{
  -webkit-text-fill-color:var(--tx);
  caret-color:var(--tx);
  -webkit-box-shadow:inset 0 0 0 1000px var(--card);
  box-shadow:inset 0 0 0 1000px var(--card);
  transition:background-color 8000s ease-in-out 0s}