/* ==========================================================
   Keystone shared styles
   Colors, fonts, top menu, light/dark switch and pop-up messages
   used by every page. Change something here and it changes everywhere.
   ========================================================== */

/* ---------- Fonts (stored with the site in the fonts folder) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url("fonts/bricolage-grotesque.woff2") format("woff2-variations"),url("fonts/bricolage-grotesque.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url("fonts/instrument-sans.woff2") format("woff2-variations"),url("fonts/instrument-sans.woff2") format("woff2")}

/* ---------- Colors: dark mode (default) ---------- */
:root{
  --nav-h:72px;
  --bg:#1b1d16; --text:#f4f1e9; --muted:#c9c7bb; --soft:#8f8d82; --line:#34362c; --line-2:#5a5c50;
  --card:#26281f; --chip:#26281f; --chip-bd:#3a3c32; --field:#1b1d16; --placeholder:#6f6d63;
  --card-hover:#7a7c6e; --ghost-hover:#7a7c6e;
  --accent:#caff45; --accent-text:#1b1d16;
  --btn:#caff45; --btn-text:#1b1d16; --btn-glow:rgba(202,255,69,.25);
  --ring:#caff45; --logo-p:#f4f1e9; --focus:#caff45; --error:#ff8a73;
  --bar:#caff45; --bar-track:#34362c; --tag:#caff45; --tag-text:#1b1d16;
  --overlay:rgba(27,29,22,.84); --overlay-text:#f4f1e9; --tag-bg:rgba(27,29,22,.84);
  /* home page hero */
  --slice:#caff45; --pitch:#f4f1e9; --picon:#1b1d16; --center:#1b1d16; --center-ring:#3a3c32; --rim:#2c2e25;
  --orbit-1:rgba(244,241,233,.1); --orbit-2:rgba(244,241,233,.08);
  --moon:#caff45; --moon-glow:0 0 0 5px rgba(202,255,69,.14),0 0 22px rgba(202,255,69,.5); --moon-2:#f4f1e9;
  --dot:#caff45; --coin-shadow:drop-shadow(0 30px 50px rgba(0,0,0,.45)); --grain:.035;
  /* type and motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Colors: light mode ---------- */
:root[data-theme="light"]{
  --bg:#f4f1e9; --text:#171711; --muted:#55544b; --soft:#7a786d; --line:#d8d4c8; --line-2:#b9b4a5;
  --card:#fbfaf6; --chip:#fbfaf6; --chip-bd:#d8d4c8; --field:#f4f1e9; --placeholder:#9a978b;
  --card-hover:#8a8577; --ghost-hover:#8a8577;
  --accent:#caff45; --accent-text:#171711;
  --btn:#171711; --btn-text:#f4f1e9; --btn-glow:rgba(23,23,17,.18);
  --ring:#6c9a0f; --logo-p:#171711; --focus:#6c9a0f; --error:#b3321c;
  --bar:#171711; --bar-track:#e6e2d7; --tag:#caff45; --tag-text:#171711;
  --overlay:rgba(251,250,246,.9); --overlay-text:#171711; --tag-bg:rgba(251,250,246,.9);
  --slice:#171711; --pitch:#caff45; --picon:#171711; --center:#f4f1e9; --center-ring:#d8d4c8; --rim:#e2ddd0;
  --orbit-1:rgba(23,23,17,.12); --orbit-2:rgba(23,23,17,.1);
  --moon:#6c9a0f; --moon-glow:0 0 0 5px rgba(108,154,15,.14); --moon-2:#171711;
  --dot:#6c9a0f; --coin-shadow:drop-shadow(0 24px 40px rgba(60,50,20,.18)); --grain:.03;
}

/* ---------- Basics ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .35s,color .35s}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
::placeholder{color:var(--placeholder)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Top menu ---------- */
/* v2: the menu stays at the top while you scroll, on a frosted bar */
nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 clamp(16px,4vw,56px);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line)}
nav[aria-label="Main"]{position:sticky;top:0;z-index:50;border-bottom-color:transparent;background:var(--bg);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);transition:border-color .3s,box-shadow .3s,background-color .35s}
nav[aria-label="Main"].scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.045em;line-height:1}
.brand span{margin-top:-3px}
.mark{width:52px;height:28px;display:block;flex:none;overflow:visible}
.mark .planet{fill:var(--ring);stroke:var(--bg);stroke-width:3}
:root[data-theme="light"] .mark{filter:drop-shadow(0 1px 1.5px rgba(23,23,17,.35))}
.logo-p{fill:var(--logo-p)}
.links{display:flex;gap:32px;font-size:15px;font-weight:600;color:var(--muted)}
.links a{position:relative;padding:6px 0;transition:color .2s}
.links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ring);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.links a:hover,.links a[aria-current="page"]{color:var(--text)}
.links a:hover:after,.links a[aria-current="page"]:after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-btn,.menu-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.theme-btn:hover,.menu-btn:hover{background:var(--card)}
.theme-btn:active{transform:rotate(-30deg)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon-ic{display:none}
:root[data-theme="light"] .theme-btn .sun-ic{display:none}
:root[data-theme="light"] .theme-btn .moon-ic{display:block}
.wallet{height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-text);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.wallet:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--btn-glow)}
.wallet:active{transform:none}
.wallet.is-connected{background:var(--card);color:var(--text);border:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.wallet.is-connected:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ring);vertical-align:1px}
.wallet.is-wrong{background:#ff7a6b;color:#1b1d16}
.wallet-menu{position:absolute;z-index:70;min-width:220px;padding:6px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);box-shadow:0 20px 40px rgba(0,0,0,.35);display:grid}
.wallet-menu a,.wallet-menu button{display:block;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.wallet-menu a:hover,.wallet-menu button:hover,.wallet-menu a:focus-visible,.wallet-menu button:focus-visible{background:var(--line);outline:none}
.menu-btn{display:none}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;content:"";transition:.2s}
.menu-btn span{position:relative}
.menu-btn span:before{position:absolute;top:-5px}
.menu-btn span:after{position:absolute;top:5px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none;position:absolute;z-index:10;top:70px;left:16px;right:16px;padding:8px;background:var(--card);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.mobile-nav.open{display:grid}
.mobile-nav a{padding:14px 16px;border-radius:12px;font-weight:600}
.mobile-nav a:hover{background:var(--line)}

/* ---------- Pop-up message at the bottom ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(440px,calc(100vw - 32px));padding:14px 18px;border-radius:14px;background:var(--text);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.3);transform:translate(-50%,140px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- $ORBIT bar at the very top ---------- */
.coin-bar{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;min-height:48px;padding:6px clamp(16px,4vw,56px);background:linear-gradient(120deg,#c4e9ff,#6cc4ff 55%,#3a9be4);color:#04111e;font-size:14px;line-height:1.3}
.coin-bar strong{font-weight:800}
.cb-name{display:flex;align-items:center;gap:8px;font-weight:800}
.cb-logo{width:24px;height:24px;flex:none}
.cb-sep{width:1px;height:22px;background:rgba(27,29,22,.25)}
.cb-ca{display:flex;align-items:center;gap:8px}
.cb-copy{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(27,29,22,.35);border-radius:8px;background:transparent;color:#1b1d16;cursor:pointer}
.cb-copy:hover{background:rgba(27,29,22,.08)}
.cb-copy svg{width:14px;height:14px}
.cb-buy{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;background:#04111e;color:#ffffff;font-weight:800;transition:transform .2s}
.cb-buy:hover{transform:translateY(-1px)}
.cb-buy img{width:16px;height:16px;object-fit:contain;border-radius:50%}
.coin-bar :focus-visible{outline-color:#1b1d16}
@media(max-width:640px){
  .coin-bar{gap:8px 12px;font-size:13px}
  .cb-long,.cb-sep{display:none}
  .cb-buy{height:32px;padding:0 12px}
}

/* ---------- Shared footer (added to every page by orbit.js) ---------- */
.site-foot{border-top:1px solid var(--line);padding:56px clamp(16px,4.5vw,56px) calc(28px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--soft);background:color-mix(in srgb,var(--card) 55%,var(--bg))}
.sf-top,.sf-bottom{max-width:1240px;margin:0 auto}
.sf-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:40px 56px;padding-bottom:40px}
.sf-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:340px;line-height:1.55}
.sf-brand strong{font-family:var(--display);font-size:24px;color:var(--text)}
.sf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:28px}
.sf-col{display:flex;flex-direction:column;gap:10px}
.sf-col h2{margin:0 0 4px;font:600 13px/1.3 var(--body);color:var(--text)}
.sf-col a{color:var(--muted);transition:color .2s}
.sf-col a:hover{color:var(--text)}
.foot-pons{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--muted)}
.foot-pons img{width:18px;height:18px;object-fit:contain}
.sf-bottom{display:flex;gap:12px 32px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px}
.sf-bottom > span{flex:none;color:var(--muted)}
.sf-fine{margin:0;font-size:12.5px;line-height:1.6;color:var(--soft);max-width:860px}
.sf-fine a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.sf-top{grid-template-columns:1fr}.sf-bottom{flex-direction:column}}

/* ---------- Simple text pages (Terms, Risk notice, 404) ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,4vw,32px) 80px}
.doc h1{margin:0 0 10px;font-family:var(--display);font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.doc .updated{margin:0 0 36px;color:var(--soft);font-size:14px}
.doc h2{margin:36px 0 10px;font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--muted)}
.doc ul{padding-left:22px}
.doc strong{color:var(--text)}
.doc a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.doc .callout{margin:0 0 28px;padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);font-size:15px;line-height:1.6;color:var(--text)}
.lost{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:64px 20px}
.lost .big-o{width:200px;height:107px}
.lost h1{margin:0;font-family:var(--display);font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.lost p{margin:0;max-width:440px;color:var(--muted);line-height:1.6}
.lost .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.lost .row a{height:46px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;font-weight:700;border:1px solid var(--line-2)}
.lost .row a.main{background:var(--btn);color:var(--btn-text);border-color:transparent}

/* ---------- Smaller screens ---------- */
@media(max-width:1000px){
  .links{display:none}
  .menu-btn{display:grid}
}
@media(max-width:640px){
  .nav-right{gap:6px}
  .theme-btn,.menu-btn{width:40px;height:40px}
  .wallet{height:40px;padding:0 12px;font-size:13px}
  .brand{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important}
}

/* ---------- Chains (Robinhood Chain / Arc) ---------- */
:root{--chain-robinhood:#caff45;--chain-robinhood-text:#1b1d16;--chain-arc:#8fd3ff;--chain-arc-text:#0d1e2b}
:root[data-theme="light"]{--chain-robinhood:#171711;--chain-robinhood-text:#caff45;--chain-arc:#0d5c8f;--chain-arc-text:#f4f9fd}
.tag.chain,.chain-pill,.w-chain{font-weight:800;letter-spacing:.01em}
.tag.chain[data-chain="robinhood"],.chain-pill[data-chain="robinhood"]{background:var(--chain-robinhood);color:var(--chain-robinhood-text)}
.tag.chain[data-chain="arc"],.chain-pill[data-chain="arc"]{background:var(--chain-arc);color:var(--chain-arc-text)}
.chain-pill{display:inline-flex;align-items:center;margin-right:7px;padding:1px 7px;border-radius:999px;font-size:11px;line-height:1.5;vertical-align:1px}
.wallet .w-chain{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;font-size:11px;line-height:1.4;vertical-align:1px;background:var(--line);color:var(--muted)}
.wallet[data-chain="arc"] .w-chain{background:var(--chain-arc);color:var(--chain-arc-text)}
.wallet[data-chain="robinhood"] .w-chain{background:var(--chain-robinhood);color:var(--chain-robinhood-text)}
.wallet-menu .wm-net{padding:8px 12px 6px;font-size:12px;font-weight:700;color:var(--soft)}

/* ---------- Arc colours: light blue instead of lime, slightly cooler neutrals ----------
   On when <html data-chain="arc"> (set by orbit-theme.js / OrbitChain.set). Robinhood keeps the colours above. */
/* v3 "professional" palette: deep navy ink, crisp hairlines, one Arc-blue accent */
:root[data-chain="arc"]{
  --bg:#0e1319; --text:#e8eef5; --muted:#a6b3c2; --soft:#74849a; --line:#222b35; --line-2:#36414e;
  --card:#151b22; --chip:#151b22; --chip-bd:#2b3540; --field:#10161c; --placeholder:#5f6f84;
  --card-hover:#4a5d76; --ghost-hover:#4a5d76;
  --accent:#6cc4ff; --accent-text:#04111e;
  --btn:#6cc4ff; --btn-text:#04111e; --btn-glow:rgba(108,196,255,.22);
  --ring:#6cc4ff; --logo-p:#e8eef5; --focus:#6cc4ff;
  --bar:#6cc4ff; --bar-track:#222b35; --tag:#6cc4ff; --tag-text:#04111e;
  --overlay:rgba(14,19,25,.82); --overlay-text:#e8eef5; --tag-bg:rgba(14,19,25,.82);
  --slice:#6cc4ff; --pitch:#e8eef5; --picon:#0e1319; --center:#0e1319; --center-ring:#2b3540; --rim:#19212a;
  --moon:#6cc4ff; --moon-glow:0 0 0 5px rgba(108,196,255,.14),0 0 22px rgba(108,196,255,.45); --moon-2:#e8eef5;
  --dot:#6cc4ff;
  --glow:rgba(108,196,255,.12); --glow-strong:rgba(108,196,255,.3);
  --card-grad:var(--card);
  --surface-2:#1a222c; --pos:#5ad6a0;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
:root[data-theme="light"][data-chain="arc"]{
  --bg:#f5f8fb; --text:#10161d; --muted:#475668; --soft:#6b7b8f; --line:#e1e8ef; --line-2:#c7d2de;
  --card:#ffffff; --chip:#ffffff; --chip-bd:#dbe3ec; --field:#f5f8fb; --placeholder:#91a0b1;
  --card-hover:#8a99aa; --ghost-hover:#8a99aa;
  --accent:#9ad8ff; --accent-text:#10161d;
  --btn:#10161d; --btn-text:#ffffff; --btn-glow:rgba(16,22,29,.16);
  --ring:#1676c2; --logo-p:#10161d; --focus:#1676c2;
  --bar:#1676c2; --bar-track:#e4ebf2; --tag:#9ad8ff; --tag-text:#10161d;
  --overlay:rgba(255,255,255,.9); --overlay-text:#10161d; --tag-bg:rgba(255,255,255,.9);
  --slice:#10161d; --pitch:#9ad8ff; --picon:#10161d; --center:#f5f8fb; --center-ring:#dbe3ec; --rim:#e6edf4;
  --moon:#1676c2; --moon-glow:0 0 0 5px rgba(22,118,194,.12); --moon-2:#10161d;
  --dot:#1676c2;
  --glow:rgba(22,118,194,.08); --glow-strong:rgba(22,118,194,.2);
  --card-grad:var(--card);
  --surface-2:#f0f4f8; --pos:#11875a;
}
html{transition:background-color .35s var(--ease)}
body{transition:background-color .35s var(--ease),color .35s var(--ease)}

/* ---------- Chain switch in the top bar ---------- */
.chain-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--chip-bd);background:var(--chip);color:var(--text);font:700 13px/1 var(--body);cursor:pointer;white-space:nowrap;transition:border-color .2s var(--ease),background .2s var(--ease)}
.chain-btn:hover{border-color:var(--ghost-hover)}
.chain-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chain-btn i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--glow,transparent);flex:none}
.chain-btn small{font:inherit;color:var(--soft);font-weight:600}
@media(max-width:860px){.chain-btn small{display:none}}
/* Phones: the switch moves into the menu so the top bar keeps its room */
@media(max-width:640px){.nav-right .chain-btn{display:none}}
.mobile-nav .chain-btn{display:none;height:auto;width:100%;justify-content:flex-start;padding:14px 16px;border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:none;font-size:15px}
.mobile-nav .chain-btn::before{content:"Chain:";color:var(--soft);font-weight:600}
@media(max-width:640px){.mobile-nav .chain-btn{display:flex}}
/* pons logo on Robinhood Chain, Argus logo on Arc (hero pill, create page, pie chart) */
:root[data-chain="arc"] .only-rh,:root:not([data-chain="arc"]) .only-arc{display:none!important}
.picon-arc{display:none}
:root[data-chain="arc"] .slice .picon{display:none}
:root[data-chain="arc"] .slice .picon-arc{display:inline}
/* The Argus logo is a round badge on a square white picture: show it as a circle */
img[src$="argus-logo.png"]{border-radius:50%;object-fit:cover!important;aspect-ratio:1;height:auto!important}
.pons img[src$="argus-logo.png"]{width:30px!important}

/* ---------- v3 type: calmer optical size and weight for every display heading ---------- */
:root{--r-lg:20px;--r-md:14px;--r-sm:10px}
.brand,.sf-brand strong{font-variation-settings:"opsz" 30;font-weight:700;letter-spacing:-.035em}
nav[aria-label="Main"]{height:68px}
.links{gap:28px;font-size:14.5px;font-weight:500}
.links a:after{height:1.5px}
.wallet{height:42px;font-weight:600}
.theme-btn,.menu-btn{width:42px;height:42px;border-color:var(--line-2)}
.toast{border-radius:12px;font-weight:500}

/* v4: the wallet button wears the brand gradient */
.wallet:not(.is-connected):not(.is-wrong){border:0;background:linear-gradient(120deg,#a6dcfc,#3a9be4);color:#04111e;box-shadow:0 8px 24px -10px rgba(108,196,255,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.wallet.is-connected{border-color:var(--line-2)}
.wallet.is-connected:before{background:#5ad6a0;box-shadow:0 0 0 3px rgba(90,214,160,.2)}
.brand span{background:linear-gradient(180deg,var(--text) 30%,color-mix(in srgb,var(--ring) 70%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Keystone logo ----------
   An arch of equal stones; the middle one is the idea. Seven sky-blue stones from the
   logo's gradient, the keystone in white (dark mode) or ink (light mode).
   On hover the keystone lifts and settles back into the arch. */
.mark .ks-key,.big-o .ks-missing{transform-box:fill-box;transform-origin:50% 100%}
.brand:hover .mark .ks-key,.brand:focus-visible .mark .ks-key{animation:ksSettle .7s var(--ease)}
@keyframes ksSettle{0%{transform:translateY(0)}35%{transform:translateY(-22%)}70%{transform:translateY(4%)}100%{transform:translateY(0)}}
.big-o .ks-missing{fill:none;stroke:var(--ring);stroke-width:2;stroke-dasharray:4 4;animation:ksBlink 2.4s ease-in-out infinite}
@keyframes ksBlink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.mark .ks-key,.big-o .ks-missing{animation:none!important}}

/* ==========================================================
   Top menu, "floating glass pill" (Menu 1)
   The whole menu is a frosted glass capsule floating just below the top of the screen.
   The links sit in their own inner pill; the page you're on lights up in the logo's sky blue.
   ========================================================== */
html nav[aria-label="Main"]{position:sticky;top:12px;z-index:50;box-sizing:border-box;height:64px;width:min(1180px,calc(100% - 32px));margin:12px auto 0;padding:0 8px 0 20px;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(14,20,28,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 60px -24px rgba(0,0,0,.8)}
html nav[aria-label="Main"].scrolled{border-color:rgba(255,255,255,.14);background:rgba(14,20,28,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 60px -20px rgba(0,0,0,.9)}
html[data-theme="light"] nav[aria-label="Main"]{border-color:rgba(16,22,29,.08);background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 50px -26px rgba(16,50,90,.35)}
html[data-theme="light"] nav[aria-label="Main"].scrolled{background:rgba(255,255,255,.82)}
nav[aria-label="Main"] .brand{font-size:22px}
nav[aria-label="Main"] .links{gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:14.5px;font-weight:500}
html[data-theme="light"] nav[aria-label="Main"] .links{background:rgba(16,22,29,.04);border-color:rgba(16,22,29,.06)}
nav[aria-label="Main"] .links a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;color:var(--muted);transition:background .25s ease,color .25s ease}
nav[aria-label="Main"] .links a:after{display:none}
nav[aria-label="Main"] .links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
html[data-theme="light"] nav[aria-label="Main"] .links a:hover{background:rgba(16,22,29,.05)}
nav[aria-label="Main"] .links a[aria-current="page"]{color:#04111e;font-weight:600;background:linear-gradient(120deg,#e3f5ff,#8fd0fb)}
nav[aria-label="Main"] .nav-right{gap:8px}
nav[aria-label="Main"] .theme-btn,nav[aria-label="Main"] .menu-btn{width:44px;height:44px;border-color:rgba(255,255,255,.12)}
html[data-theme="light"] nav[aria-label="Main"] .theme-btn,html[data-theme="light"] nav[aria-label="Main"] .menu-btn{border-color:rgba(16,22,29,.12)}
nav[aria-label="Main"] .wallet{height:44px;padding:0 22px}
/* the phone menu drops down under the pill */
nav[aria-label="Main"] .mobile-nav{top:72px;left:0;right:0;border-radius:22px;background:rgba(14,20,28,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:rgba(255,255,255,.12)}
html[data-theme="light"] nav[aria-label="Main"] .mobile-nav{background:rgba(255,255,255,.95);border-color:rgba(16,22,29,.08)}
@media(max-width:640px){
  html nav[aria-label="Main"]{height:58px;top:8px;margin-top:8px;width:calc(100% - 20px);padding:0 6px 0 14px}
  nav[aria-label="Main"] .brand{font-size:20px}
  nav[aria-label="Main"] .theme-btn,nav[aria-label="Main"] .menu-btn{width:40px;height:40px}
  nav[aria-label="Main"] .wallet{height:40px;padding:0 14px}
  nav[aria-label="Main"] .mobile-nav{top:64px}
}