:root{color-scheme:dark;--paper:#f2f5fc;--ink:#070b14;--ink2:#0d1423;--dim:#95a4bd;--line:#bdceef24;--rise:#1b2c49}
*{box-sizing:border-box}body{margin:0;background:#091723;color:var(--paper);font-family:var(--hv-body);font-size:15px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--hv-sky);outline-offset:4px}button:disabled{cursor:not-allowed}button,img{-webkit-user-select:none;user-select:none}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- the map: the islands photo, its outlines and markers (unchanged by the brand v2 pass) ---------- */
.ex-map{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#0b1b28}.ex-map.dragging{cursor:grabbing}.ex-world{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0}.ex-landscape{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:saturate(.94)}.ex-shade{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#040b1880 0%,transparent 23%,transparent 71%,#040b18c2 100%)}.ex-regions{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ex-regions path{fill:transparent;stroke:transparent;stroke-width:1.5;pointer-events:all;cursor:pointer;transition:fill .4s,stroke .4s;vector-effect:non-scaling-stroke}.ex-regions path.active{fill:#aacdff19;stroke:#cee5ff99;filter:drop-shadow(0 0 9px #99cbff)}
.ex-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;padding:12px;cursor:pointer}.ex-marker-orb{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid #c4dcff85;border-radius:50%;background:linear-gradient(150deg,#294763eb,#10203be8);box-shadow:0 0 0 5px #b4d7ff12,0 0 30px #afd0ff55,0 8px 24px #00131f;font-size:23px;transition:transform .3s,box-shadow .3s}.ex-marker-orb:before{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px solid #d1e7ff66;animation:beacon 5s ease-out infinite;pointer-events:none}.ex-marker-orb img{width:27px;height:27px;border-radius:50%}.ex-marker-hub .ex-marker-orb{width:48px;height:48px;border-radius:15px}.ex-marker-hub .ex-marker-orb img{width:38px;height:38px;border-radius:10px}.ex-marker-hub .ex-marker-orb:before{border-radius:20px}.ex-marker-label{font-size:11px;font-weight:500;letter-spacing:.04em;background:#0a1527d9;border:1px solid #c1d6f346;border-radius:30px;padding:6px 11px;box-shadow:0 4px 15px #04102455;backdrop-filter:blur(12px);white-space:nowrap}.ex-marker-label>span{margin-left:7px;color:#b7d5f9}.ex-marker:hover .ex-marker-orb,.ex-marker[aria-expanded=true] .ex-marker-orb{transform:translateY(-5px);box-shadow:0 0 0 8px #b4d7ff14,0 0 45px #afd0ff88,0 8px 24px #00131f}
/* the markers keep the face they had before the brand v2 pass (the page body is Space Grotesk now) */
.ex-marker{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
@keyframes beacon{0%{transform:scale(.75);opacity:0}25%{opacity:.4}80%,100%{transform:scale(1.7);opacity:0}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}@keyframes card-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* an older Hub landing (no page uses it now; left as it was) */
.ex-hub{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 24px 80px;overflow:hidden;background:linear-gradient(#060d1bbb,#050d19eb),url('./islands.jpg') center/cover}.ex-hub h1{font:500 clamp(25px,4vw,44px)/1.5 Unbounded,sans-serif;letter-spacing:-.035em;margin:14px 0}.ex-hub p{font-size:15px;color:#b4c9e5;margin:0}.ex-hub-art{position:relative;margin:0 0 65px;animation:float 6s ease-in-out infinite}.ex-hub-art img{position:relative;border-radius:26px;box-shadow:0 0 80px #7ca5ed36;z-index:1}.ex-hub-art:before,.ex-hub-art:after{content:'';position:absolute;inset:-50px;border:1px solid #b5d3ff36;border-radius:50%;transform:rotate(-25deg) scaleY(.6)}.ex-hub-art:after{inset:-32px;transform:rotate(25deg) scaleY(.6)}.ex-back{margin-top:35px;border:1px solid #bbd5fa40;border-radius:50px;padding:13px 24px;background:#bdd3fd0a;font-size:12px}.ex-back:hover{background:#bdd3fd20}
@media(max-width:640px){.ex-marker-label{font-size:10px}.ex-marker-orb{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.ex-marker{color:inherit;text-decoration:none}.ex-regions a{pointer-events:auto}

/* Explore, 2026-09-29: the island render (3840x2160), the island outline light and the markers' spring motion. */
body[data-page="explore"] .ex-map{background:#060a16}
.ex-landscape{filter:none;animation:ex-settle 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes ex-settle{from{opacity:0;transform:scale(1.04)}}
.ex-shade{background:radial-gradient(ellipse at 50% 46%,rgba(4,7,18,0) 40%,rgba(4,7,18,.26) 68%,rgba(4,7,18,.68) 100%),linear-gradient(180deg,rgba(4,7,18,.72) 0%,rgba(4,7,18,.36) 10%,rgba(4,7,18,0) 24%,rgba(4,7,18,0) 66%,rgba(4,7,18,.84) 100%)}
.ex-regions path[data-region]{transition:fill .45s ease,stroke .45s ease}
.ex-regions path[data-region].active{fill:rgba(170,198,255,.1);stroke:rgba(214,228,255,.6);filter:drop-shadow(0 0 10px rgba(150,180,255,.55))}
.ex-regions path.ex-trace{fill:none;stroke:#f1f5ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 86;opacity:0;pointer-events:none;vector-effect:non-scaling-stroke;transition:opacity .35s ease}
.ex-regions path.ex-trace.active{opacity:.95;animation:ex-trace 3.4s linear infinite}
@keyframes ex-trace{to{stroke-dashoffset:-100}}
.ex-marker{animation:ex-pin-in .75s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.55s}
.ex-marker[data-island="swap"]{animation-delay:.67s}.ex-marker[data-island="stake"]{animation-delay:.79s}.ex-marker[data-island="earn"]{animation-delay:.91s}
@keyframes ex-pin-in{from{opacity:0;transform:translate(-50%,-26%) scale(.82)}}
.ex-marker-orb{border:1px solid transparent;background:linear-gradient(160deg,rgba(56,74,138,.94),rgba(13,19,42,.95)) padding-box,linear-gradient(150deg,rgba(230,237,255,.85),rgba(140,160,255,.22) 46%,rgba(196,210,255,.55)) border-box;box-shadow:0 0 0 5px rgba(180,200,255,.08),0 0 30px rgba(150,172,255,.45),0 10px 24px rgba(2,6,16,.7)}
.ex-marker-orb:before{border-color:rgba(214,226,255,.55)}
.ex-marker-label{background:rgba(9,13,30,.84);border-color:rgba(200,214,255,.3);transition:background .3s ease,border-color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.ex-marker-label>span{color:#c9d5ff;display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.ex-marker:hover .ex-marker-label,.ex-marker[aria-expanded=true] .ex-marker-label{background:rgba(24,32,70,.94);border-color:rgba(222,232,255,.62);transform:translateY(-2px)}
.ex-marker:hover .ex-marker-label>span,.ex-marker[aria-expanded=true] .ex-marker-label>span{transform:translate(2px,-2px)}
.ex-marker:hover .ex-marker-orb,.ex-marker[aria-expanded=true] .ex-marker-orb{box-shadow:0 0 0 8px rgba(180,200,255,.1),0 0 48px rgba(160,182,255,.75),0 10px 24px rgba(2,6,16,.7)}
.ex-dock-wrap{animation:ex-dock-in .8s .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes ex-dock-in{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Brand v2 chrome (15 Oct 2026; HANS/brand/BRAND.md) ----------
   The kit (/assets/brand/v2/hans.css, loaded before this file) brings the tokens, the Unbounded and Space Grotesk faces,
   liquid glass (.hv-glass), the ice primary button, the profile button with its spinning ring and the sliding lens.
   This block styles the pieces that sit over the map. Explore, the Hub and the clubs share the header; the map, its
   markers and island outlines above and below are unchanged. Glass over the map has no refraction: the map pans under
   it and the lens filter would be redrawn every frame. */
/* header: brand, partner apps (Explore only), profile, wallet */
.ex-header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 36px;pointer-events:none}
.ex-header>*{pointer-events:auto}
.ex-brand{display:flex;align-items:center;gap:12px;text-shadow:0 2px 16px rgba(2,5,13,.75)}
.ex-brand img{width:40px;height:40px;border-radius:11px;filter:drop-shadow(0 0 14px rgba(133,188,251,.35));transition:transform .6s var(--hv-spring),filter .3s ease}
.ex-brand:hover img,.ex-brand:focus-visible img{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 20px rgba(160,205,255,.7))}
.ex-brand span{font:700 16px/1 var(--hv-display);letter-spacing:-.04em;white-space:nowrap;transition:letter-spacing .5s var(--hv-ease)}
.ex-brand:hover span,.ex-brand:focus-visible span{letter-spacing:.01em}
.ex-brand small{display:block;margin-top:7px;font:600 9.5px/1.25 var(--hv-body);letter-spacing:.16em;text-transform:uppercase;white-space:normal;color:var(--hv-muted)}
.ex-account{display:flex;align-items:center;gap:10px}
.ex-account .hv-pfp{flex:none}   /* 48 px, 44 px on phones: touch targets (spec §11.1) */
/* Log in: the ice primary pill with an arrow that nudges on hover. Once a wallet is connected (explore.js swaps the
   classes) it is a glass pill that shows the address. */
.ex-wallet{min-height:48px;padding:0 22px;font-size:14px}
.ex-wallet.hv-btn-primary::before{content:"→" / "";order:1;display:inline-block;transition:transform .45s var(--hv-spring)}
.ex-wallet.hv-btn-primary:hover::before{transform:translateX(4px)}
.ex-wallet.hv-glass{--r:999px;font-variant-numeric:tabular-nums}
/* partner apps: glass icon wells */
body[data-page="explore"] .ex-identity{display:flex;align-items:center;gap:20px}
.ex-app-links{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid rgba(160,200,255,.2)}
.ex-app-links a{--r:15px;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;transition:transform .5s var(--hv-spring),box-shadow .3s ease}
.ex-app-links a:hover,.ex-app-links a:focus-visible{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 0 24px rgba(120,170,255,.07),0 18px 40px -22px rgba(0,0,0,.8),0 0 26px -4px rgba(98,160,255,.6)}
.ex-app-links img{width:28px;height:28px;object-fit:contain;border-radius:8px;transition:transform .6s var(--hv-spring)}
.ex-app-links a:first-child img{width:38px;height:38px;border-radius:10px}
.ex-app-links a:hover img,.ex-app-links a:focus-visible img{transform:rotate(-6deg) scale(1.06)}

/* the island chooser: a glass pill group with the kit's sliding lens (data-hv-lens rests it on aria-pressed=true) */
.ex-dock-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;text-align:center;width:max-content;max-width:calc(100% - 24px)}
.ex-map-caption{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;font:600 12px/1.2 var(--hv-display);letter-spacing:-.01em;color:var(--hv-ice2);text-shadow:0 2px 14px rgba(2,5,13,.9)}
.ex-live-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 0 4px rgba(140,190,255,.14),0 0 12px var(--hv-live);animation:ex-live 2s ease-in-out infinite}
@keyframes ex-live{50%{box-shadow:0 0 0 7px rgba(140,190,255,.04),0 0 16px var(--hv-live)}}
.ex-dock{--r:999px}
.ex-dock button{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px}
.ex-dock button img{width:22px;height:22px;border-radius:50%;transition:transform .5s var(--hv-spring)}
.ex-dock button>span{font-size:21px;line-height:22px;display:inline-block;transition:transform .5s var(--hv-spring)}
.ex-dock button:hover img,.ex-dock button:hover>span{transform:translateY(-2px) rotate(-8deg)}
.ex-hint{margin:12px 0 0;font:500 12px/1.2 var(--hv-body);letter-spacing:.04em;color:var(--hv-muted);text-shadow:0 2px 12px rgba(2,5,13,.9)}

/* the island card: a glass tile with the kit's tilt and cursor light (data-hv-tilt), its tail on the marker */
@property --ex-shine{syntax:'<number>';inherits:false;initial-value:0}
.ex-island-card{--tail:50%;--r:26px;position:fixed;z-index:20;width:360px;max-width:calc(100vw - 32px);padding:22px;border-radius:26px;cursor:pointer;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(170,210,255,calc(var(--ex-shine) * .16)),rgba(98,160,255,calc(var(--ex-shine) * .05)) 40%,transparent 66%),
    radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--hv-glass-hi),rgba(10,24,58,.8);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 -1px 0 rgba(235,244,255,.05),inset 0 0 24px rgba(120,170,255,.07),0 40px 80px -30px rgba(0,0,0,.9),0 0 50px -24px rgba(98,160,255,.55);
  transform-origin:var(--tail) calc(100% + 16px);transition:transform .5s var(--hv-spring),--ex-shine .3s ease;animation:ex-card-pop .5s var(--hv-spring) both}
.ex-island-card[data-side="below"]{transform-origin:var(--tail) -16px}
.ex-island-card:hover{--ex-shine:1}
/* the kit draws the rim with ::before; ::after is the tail (it covers the rim where it joins the card) */
.ex-island-card::after{content:"";position:absolute;inset:auto auto -8px var(--tail);z-index:2;width:15px;height:15px;margin-left:-7.5px;border-radius:0 0 4px 0;
  background:#0b1838;box-shadow:inset -1px -1px 0 rgba(170,205,255,.42);transform:rotate(45deg)}
.ex-island-card[data-side="below"]::after{top:-8px;bottom:auto;background:#13254f;transform:rotate(225deg)}
@keyframes ex-card-pop{from{opacity:0;translate:0 10px;scale:.93}}
.ex-island-card.ex-swap-in>*{animation:ex-content-in .34s var(--hv-ease) both}
.ex-island-card.ex-swap-in>*:nth-child(2){animation-delay:.04s}.ex-island-card.ex-swap-in>*:nth-child(3){animation-delay:.08s}
@keyframes ex-content-in{from{opacity:0;transform:translateY(6px)}}
.ex-card-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ex-card-art{position:relative;display:flex;align-items:center;justify-content:center;width:100px;height:86px;flex:none;background:radial-gradient(ellipse,rgba(98,160,255,.2),transparent 70%)}
.ex-card-art>img{width:85px;height:85px;object-fit:contain;animation:float 5s ease-in-out infinite}
.ex-card-art.earn>img{width:100px;height:100px}
.ex-eyebrow{font:600 11px/1.35 var(--hv-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-sky)}
.ex-island-card h2{margin:8px 0 0;font:600 22px/1.1 var(--hv-display);letter-spacing:-.035em;color:#fff}
.ex-island-card p{margin:0 0 20px;font:400 15px/1.5 var(--hv-body);color:var(--hv-muted)}
/* the card's call to action: an ice pill (the whole card is the link) */
.ex-card-link{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border-radius:999px;font:600 13.5px/1 var(--hv-body);color:#06122E;
  background:linear-gradient(180deg,#F6FAFF 0%,#CFE3FF 48%,#9CC4FF 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 12px 34px -12px rgba(98,160,255,.85),0 0 0 1px rgba(200,225,255,.55);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.ex-island-card:hover .ex-card-link{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 18px 44px -12px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.ex-card-link span:last-child{display:inline-block;font-size:15px;transition:transform .45s var(--hv-spring)}
.ex-island-card:hover .ex-card-link span:last-child{transform:translate(3px,-3px)}
.ex-token-pair{display:flex;align-items:center;gap:0}
.ex-token-pair img{width:47px;height:47px;box-shadow:0 0 24px rgba(98,160,255,.35);border-radius:50%;animation:float 5s ease-in-out infinite}
.ex-token-pair img:last-child{animation-delay:-2s;transform:translateX(-4px)}
.ex-token-pair span{z-index:2;font-size:18px;color:var(--hv-sky);margin:0 -2px}
.ex-card-art.hub img{width:66px;height:66px;border-radius:18px}
.ex-card-art.hub:after{content:'';position:absolute;inset:0;border:1px solid rgba(160,200,255,.22);border-radius:50%;transform:rotate(-25deg) scaleY(.55)}

/* wallet chooser: a glass dialog with glass rows */
.ex-wallet-dialog{z-index:100;width:440px;max-width:calc(100% - 28px);padding:26px;border:0;border-radius:28px;color:var(--hv-paper);font-family:var(--hv-body);
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--hv-glass-hi),rgba(10,24,58,.86);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.26),inset 0 0 0 1px rgba(160,200,255,.2),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -30px rgba(98,160,255,.6)}
.ex-wallet-dialog[open]{animation:ex-dialog-in .5s var(--hv-spring) both}
@keyframes ex-dialog-in{from{opacity:0;translate:0 16px;scale:.96}}
.ex-wallet-dialog::backdrop{background:rgba(2,5,13,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ex-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.ex-dialog-top h2{margin:0;font:600 20px/1.2 var(--hv-display);letter-spacing:-.035em}
.ex-close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;font-size:22px;line-height:1;color:var(--hv-paper);
  background:var(--hv-glass-hi),rgba(12,26,62,.6);box-shadow:inset 0 1px 0 rgba(235,244,255,.22),inset 0 0 0 1px rgba(160,200,255,.2);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.ex-close:hover{transform:rotate(90deg);box-shadow:inset 0 1px 0 rgba(235,244,255,.3),inset 0 0 0 1px rgba(160,200,255,.4),0 0 22px -4px rgba(98,160,255,.6)}
.ex-wallet-dialog p{margin:12px 0 4px;color:var(--hv-muted);font-size:15px;line-height:1.5}
.ex-wallet-dialog #walletStatus{margin-top:14px;font-size:14px;color:var(--hv-ice)}
.ex-wallet-dialog #walletStatus:empty{display:none}
.ex-wallet-option{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:0 20px;text-align:left;font:600 15px/1.2 var(--hv-body);color:var(--hv-paper);
  border:1px solid rgba(160,200,255,.18);border-radius:18px;background:var(--hv-glass-hi),rgba(12,24,58,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .45s var(--hv-spring),border-color .2s ease,background-color .2s ease,box-shadow .3s ease}
.ex-wallet-option::after{content:"→" / "";margin-left:auto;color:var(--hv-sky);transition:transform .45s var(--hv-spring)}
.ex-wallet-option:hover{transform:translateY(-2px);border-color:rgba(160,200,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px -8px rgba(98,160,255,.6)}
.ex-wallet-option:hover::after{transform:translateX(4px)}
/* status line: a glass pill */
.ex-status{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:40;max-width:90%;padding:12px 18px;border-radius:16px;font:500 14px/1.4 var(--hv-body);text-align:center;color:var(--hv-paper);
  background:var(--hv-glass-hi),rgba(10,24,58,.86);box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 0 0 1px rgba(160,200,255,.2),0 18px 40px -22px rgba(0,0,0,.8)}
.ex-status:empty{display:none}

@media(max-width:820px){body[data-page="explore"] .ex-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}body[data-page="explore"] .ex-identity{display:contents}body[data-page="explore"] .ex-brand{grid-column:1;grid-row:1}body[data-page="explore"] .ex-account{grid-column:2;grid-row:1}.ex-app-links{grid-column:1/-1;grid-row:2;width:max-content;padding-left:0;margin-left:52px;border-left:0;gap:6px}}
/* phones: a compact header, and the island chooser becomes the v2 dock (icon over label) */
@media(max-width:640px){
  .ex-header{padding:16px;gap:10px}
  .ex-brand{gap:9px}
  .ex-brand img{width:34px;height:34px;border-radius:9px}
  .ex-brand span{font-size:12.5px}
  .ex-brand small{max-width:130px;margin-top:5px;font-size:6.5px;letter-spacing:.12em}
  .ex-account{gap:8px}
  .ex-account .hv-pfp{width:44px;height:44px}
  .ex-wallet{min-height:44px;padding:0 16px;gap:8px;font-size:13px}
  .ex-app-links{margin-left:43px}
  .ex-app-links a{--r:14px;width:44px;height:44px;border-radius:14px}
  .ex-app-links img{width:27px;height:27px}
  .ex-dock-wrap{bottom:max(16px,env(safe-area-inset-bottom))}
  .ex-map-caption{margin-bottom:12px;font-size:11px}
  .ex-dock{--r:24px;gap:2px;width:min(94vw,420px);padding:6px;border-radius:24px}
  .ex-dock .hv-lens{top:6px;bottom:6px;border-radius:18px}
  .ex-dock button{flex:1;flex-direction:column;gap:4px;min-height:54px;padding:7px 0;border-radius:18px;font-size:11px;font-weight:600}
  .ex-hint{margin-top:10px;font-size:11px}
  .ex-island-card{--r:24px;width:336px;padding:20px;border-radius:24px}
  .ex-island-card h2{font-size:20px}
  .ex-island-card p{margin-bottom:16px;font-size:14px}
  .ex-card-art{height:65px;width:85px}
  .ex-card-art.earn>img{width:85px;height:85px}
}
/* narrow phones: the wallet pill drops its arrow and tightens so the brand keeps its room */
@media(max-width:420px){.ex-wallet{padding:0 14px;font-size:12px}.ex-wallet.hv-btn-primary::before{display:none}}
@media(max-width:360px){body[data-page="explore"] .ex-header{gap:8px}.ex-account{gap:6px}.ex-wallet{padding:0 12px;font-size:11px}body[data-page="explore"] .ex-brand{gap:8px}body[data-page="explore"] .ex-brand img{width:30px;height:30px}body[data-page="explore"] .ex-brand span{font-size:9.5px}body[data-page="explore"] .ex-brand small{font-size:5.5px;letter-spacing:.08em}.ex-app-links{margin-left:38px}.ex-dock button{font-size:10px}}
/* 320 px phones (hub and the clubs): the 44 px header buttons leave no room for the brand words (the link keeps its
   aria-label) or a wrapped address. */
@media(max-width:340px){.ex-wallet{white-space:nowrap}body:not([data-page="explore"]) .ex-brand span{display:none}}
/* touch screens: the brand link is a 44 px target too */
@media(pointer:coarse){.ex-brand{min-width:44px;min-height:44px}}
/* the Hub card's art: the HANS mark with the three clubs' logos in orbit */
.ex-card-art.hub{position:relative;overflow:visible}.ex-card-art.hub>img{width:62px}.ex-orbit-project{position:absolute!important;width:25px!important;height:25px!important;background:var(--hv-navy2);border:1px solid rgba(160,200,255,.3);border-radius:9px;display:grid;place-items:center;box-shadow:0 0 14px rgba(98,160,255,.3);animation:ex-project-float 5s ease-in-out infinite}.ex-orbit-project img{width:18px!important;height:18px!important;object-fit:contain;border-radius:4px}.ex-orbit-project.luma{left:-8px;top:12px}.ex-orbit-project.iris{right:-5px;top:1px;animation-delay:-1.5s}.ex-orbit-project.superseed{right:2px;bottom:-9px;animation-delay:-3s}@keyframes ex-project-float{50%{translate:0 -4px}}@media(prefers-reduced-motion:reduce){.ex-orbit-project{animation:none}}
/* token icons are round artwork already; a circular crop only cut sHANS's 's' badge on the coin's rim (the HANS mark keeps its crop) */
.ex-dock button img[src*="/tokens/"],.ex-marker-orb img[src*="/tokens/"]{border-radius:0}
/* Vote: a line glyph (the vote pages' own) in the marker orb and the dock, and the ballot box on its card */
.ex-marker-orb>svg,.ex-dock button>svg{width:22px;height:22px;fill:none;stroke:#EAF3FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ex-dock button>svg{transition:transform .5s var(--hv-spring)}.ex-dock button:hover>svg{transform:translateY(-2px) rotate(-8deg)}
.ex-marker[data-island="vote"]{animation-delay:.73s}
.ex-card-art.vote>img{width:96px;height:86px}
@media(max-width:640px){.ex-marker-orb>svg{width:20px;height:20px}.ex-card-art.vote>img{width:80px;height:72px}}