/* GENERATED by overlay/v3/build.mjs: the v3 header and footer on the World and DNN pages */
/* overlay/v3/css/tokens.css, 51 used properties, scoped */
@font-face { font-family: "DL Archivo"; src: url("/fonts/archivo-800.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DL Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 100 549; font-style: normal; font-display: swap; }
@font-face { font-family: "DL Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 550 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DL Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DL Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 100 900; size-adjust: 102.5%; ascent-override: 85.7%; descent-override: 20.5%; line-gap-override: 0%; }
@font-face { font-family: "DL Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 100 549; size-adjust: 107.3%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "DL Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 550 900; size-adjust: 101.1%; ascent-override: 95.8%; descent-override: 23.9%; line-gap-override: 0%; }
@font-face { font-family: "DL Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"); font-weight: 100 900; size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
body[data-page="studio"] > :is(.skip, .hd, .sb, .ft) { --head: "DL Archivo", "DL Archivo Fallback", system-ui, sans-serif; --sans: "DL Inter", "DL Inter Fallback", system-ui, sans-serif; --mono: "DL Mono", "DL Mono Fallback", ui-monospace, monospace; --c-bg: var(--bg); --c-surface: var(--sf); --c-surface-2: var(--sf2); --c-surface-3: var(--sf3); --c-text: var(--fg); --c-text-read: var(--fgl); --c-muted: var(--mu); --c-text-plate: var(--ac-fg); --c-line: var(--ln); --c-edge: var(--ln2); --c-control: #6577A8; --c-accent: var(--ac); --c-focus: var(--ac); --c-success: var(--ok); --hover-row-bg: var(--sf2); --t-stat: clamp(0.9375rem, 0.902rem + 0.179vw, 1.0625rem); --t-body: 0.9375rem; --t-ui: 0.875rem; --t-small: 0.8125rem; --t-mono: 0.78125rem; --w-head: 800; --w-body: 400; --w-strong: 600; --w-mono: 500; --tr-head: -0.02em; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 48px; --s-10: 72px; --r-pill: 999px; --r-sheet: 16px; --el-float: 0 18px 40px -22px rgba(4,6,14,.92); --el-sheet: 0 -14px 36px -18px rgba(4,6,14,.95); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-focus); --pfp-24: 24px; --hd-h: 56px; --ribbon-h: 24px; --bar-h: calc(56px + env(safe-area-inset-bottom)); --hit-min: 44px; --maxw-channel: 1560px; --z-popover: 50; --z-sheet: 60; --z-toast: 70; }
@media (max-width: 379.98px) { body[data-page="studio"] > :is(.skip, .hd, .sb, .ft) { --ribbon-h: 40px; } }

/* overlay/world-chrome.css */
/* devless.fun · the site header and footer on the World and DNN pages (appended to the generated css/chrome.css, see overlay/chrome.mjs) */
/* the kit's body type, so the header and footer read exactly as on every other page */
.hd, .ft { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--fg); letter-spacing: normal; }
/* the World's tokens.css swaps the kit's focus ring on every .btn: the header keeps the kit's */
.hd .btn:focus-visible { clip-path: var(--cut); outline: 0; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 4px var(--ac); }
/* the kit's toast, appended to <body> by js/ui.js: drop what the World's own .toast rule would add */
body > .toast { clip-path: none; max-inline-size: none; animation: none; }

/* /world: the header on top, the map and its HUD in the rest of the viewport. .kw-vp holds every World element and is the containing
   block of their position: fixed (contain: layout), so the full-screen canvas, the top bar, the rail and the ticker start under the header.
   Nothing scrolls: the page is exactly the viewport. */
body.world { display: flex; flex-direction: column; height: 100%; height: 100dvh; overflow: hidden; }
body.world > .hd { flex: none; position: relative; }
body.world > .kw-vp { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; contain: layout paint; }
/* the main header carries the brand and the News link: the World's top bar keeps its tools (filters, season clock, numbers, preview badge) */
body.world .tb-brand, body.world .tb-news { display: none; }

/* DNN: the desks bar and the side column stick under the header (js/chrome.js measures it into --kit-hd-h) */
.dnn-page .desks { top: var(--kit-hd-h, 0px); }
html:has(.dnn-page) { scroll-padding-top: calc(var(--kit-hd-h, 0px) + var(--nav-h) + var(--s-5)); }
@media (min-width: 1024px) { .dnn-page .top-side { top: calc(var(--kit-hd-h, 0px) + var(--nav-h) + var(--s-5)); } }

/* overlay/v3/css/chrome/header.css */
/* v3 header, popovers, footer and the wallet sheet on /world, /news, /news-article and /e/<n> (owner: pixel). Concatenated into /v3/css/chrome.css by
   overlay/v3/build.mjs after tokens.css (scoped to body > .hd / .ft) and master's overlay/world-chrome.css. GENERATED from overlay/v3/css/base.css
   (same rules, scoped so they never touch the World or DNN page styles): rerun the generator when the header rules change. */
:is(body > .hd, body > .ft) .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body > .skip { z-index: var(--z-toast); }
:is(body > .hd, body > .ft) .btn { clip-path: none; border-radius: var(--step); min-height: var(--hit-min); padding: 0 var(--s-6); font-size: var(--t-ui); gap: var(--s-3); text-decoration: none; }
:is(body > .hd, body > .ft) .btn.pri { min-height: 48px; background: var(--c-accent); color: var(--c-text-plate); box-shadow: none; }
:is(body > .hd, body > .ft) .btn.pri:hover { background: var(--ac-h); }
:is(body > .hd, body > .ft) .btn.sec { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-control); }
:is(body > .hd, body > .ft) .btn.sec:hover { background: var(--c-surface-3); }
:is(body > .hd, body > .ft) .btn:focus-visible, :is(body > .hd, body > .ft) .btn.pri:focus-visible { box-shadow: var(--focus-ring); }
:is(body > .hd, body > .ft) .btn.sec:focus-visible { box-shadow: inset 0 0 0 1px var(--c-control), var(--focus-ring); }
:is(body > .hd, body > .ft) .btn[aria-busy="true"] { color: transparent; position: relative; }
:is(body > .hd, body > .ft) .tbtn, :is(body > .hd, body > .ft) .tlink { display: inline-flex; align-items: center; min-height: var(--hit-min); color: var(--c-text); font-weight: var(--w-strong); font-size: var(--t-ui); text-decoration: underline; text-decoration-color: var(--c-control); text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
:is(body > .hd, body > .ft) .tbtn:hover, :is(body > .hd, body > .ft) .tlink:hover { text-decoration-color: var(--c-text); }
:is(body > .hd, body > .ft) .tbtn[aria-disabled="true"] { color: var(--c-muted); cursor: not-allowed; }
:is(body > .hd, body > .ft) .ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; max-width: none; }
body > .hd { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
:is(body > .hd, body > .ft) .hd-in { max-width: var(--maxw-channel); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--hd-h); height: var(--hd-h); flex-wrap: nowrap; display: flex; align-items: center; gap: var(--s-5); }
:is(body > .hd, body > .ft) .brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--hit-min); flex: none; }
:is(body > .hd, body > .ft) .brand img { image-rendering: pixelated; }
:is(body > .hd, body > .ft) .brand-name { font-family: var(--head); font-weight: var(--w-head); font-size: var(--t-stat); color: var(--c-text); letter-spacing: var(--tr-head); }
:is(body > .hd, body > .ft) .nav { display: none; }
:is(body > .hd, body > .ft) .nav-list { display: flex; flex-wrap: wrap; }
:is(body > .hd, body > .ft) .nav-list a { display: inline-flex; align-items: center; min-height: var(--hd-h); padding-inline: 6px; color: var(--c-muted); font-weight: var(--w-strong); font-size: var(--t-ui); border-bottom: 2px solid transparent; }
:is(body > .hd, body > .ft) .nav-list a:hover { color: var(--c-text); }
:is(body > .hd, body > .ft) .nav-list a[aria-current="page"] { color: var(--c-text); border-bottom-color: var(--c-text); }
:is(body > .hd, body > .ft) .hd-act { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
:is(body > .hd, body > .ft) .hd-item { display: none; min-height: var(--hit-min); padding-inline: var(--s-3); color: var(--c-muted); font-weight: var(--w-strong); font-size: var(--t-ui); }
:is(body > .hd, body > .ft) .hd-item:hover, :is(body > .hd, body > .ft) .hd-item[aria-expanded="true"] { color: var(--c-text); }
:is(body > .hd, body > .ft) .wallet-btn { padding-inline: var(--s-4); }
:is(body > .hd, body > .ft) .wallet-face:empty { display: none; }
:is(body > .hd, body > .ft) .wallet-face svg { width: var(--pfp-24); height: var(--pfp-24); }
:is(body > .hd, body > .ft) .menu-btn { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--hit-min); padding-inline: var(--s-3); color: var(--c-text); font-weight: var(--w-strong); font-size: var(--t-ui); }
:is(body > .hd, body > .ft) .menu-glyph { fill: currentColor; }
:is(body > .hd, body > .ft) .menu-glyph .g-shut, :is(body > .hd, body > .ft) .menu-btn[aria-expanded="true"] .g-open { display: none; }
:is(body > .hd, body > .ft) .menu-btn[aria-expanded="true"] .g-shut { display: inline; }
:is(body > .hd, body > .ft) .menu { border-top: 1px solid var(--c-line); background: var(--c-surface); border-bottom: 1px solid var(--c-edge); max-height: calc(100dvh - var(--hd-h)); overflow: auto; padding: var(--s-4) var(--gutter) var(--s-6); }
:is(body > .hd, body > .ft) .menu-pin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
:is(body > .hd, body > .ft) .menu-pin-b { min-height: 48px; background: var(--c-surface-2); border-radius: var(--step); font-weight: var(--w-strong); color: var(--c-text); }
:is(body > .hd, body > .ft) .menu-list a, :is(body > .hd, body > .ft) .menu-more a { display: flex; align-items: center; min-height: 48px; font-weight: var(--w-strong); font-size: var(--t-stat); color: var(--c-text); border-bottom: 1px solid var(--c-line); }
:is(body > .hd, body > .ft) .menu-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
:is(body > .hd, body > .ft) .menu-more a { color: var(--c-text-read); font-size: var(--t-ui); }
@media (max-width: 22.49em) { :is(body > .hd, body > .ft) .brand-name { display: none; } }
@media (min-width: 64em) { :is(body > .hd, body > .ft) .nav { display: block; } :is(body > .hd, body > .ft) .hd-item { display: inline-flex; align-items: center; } :is(body > .hd, body > .ft) .menu-btn, :is(body > .hd, body > .ft) .menu { display: none !important; } }
@media (min-width: 75em) { :is(body > .hd, body > .ft) .nav-list a { padding-inline: var(--s-4); } }
@media (max-height: 500px) { body > .hd { position: static; } }
:is(body > .hd, body > .ft) .pop { position: fixed; z-index: var(--z-popover); top: calc(var(--hd-h-now) + var(--ribbon-now) + var(--s-3)); right: var(--gutter); width: min(380px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--hd-h-now) - var(--ribbon-now) - var(--s-7)); overflow: auto; background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--step);
  box-shadow: var(--el-float); padding: var(--s-6); display: grid; gap: var(--s-4); color: var(--c-text-read); font-size: var(--t-body); outline: none; }
:is(body > .hd, body > .ft) .pop-t { font-family: var(--sans); font-weight: var(--w-strong); font-size: var(--t-stat); letter-spacing: 0; outline: none; }
:is(body > .hd, body > .ft) .pop-rows:empty { display: none; }
:is(body > .hd, body > .ft) .pop-rows a { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; color: var(--c-text); }
:is(body > .hd, body > .ft) .pop-rows a:hover { background: var(--hover-row-bg); }
:is(body > .hd, body > .ft) .pop-close { justify-self: start; }
:is(body > .hd, body > .ft) .pop-status { color: var(--c-text); }
body > .ft { border-top: 1px solid var(--c-line); margin-top: var(--s-10); background: var(--c-bg); }
:is(body > .hd, body > .ft) .ft-in { max-width: var(--maxw-channel); margin: 0 auto; padding: var(--s-9) var(--gutter) calc(var(--s-9) + var(--bar-h)); display: grid; gap: var(--s-7); }
:is(body > .hd, body > .ft) .ft-name { font-family: var(--head); font-weight: var(--w-head); font-size: var(--t-stat); color: var(--c-text); }
:is(body > .hd, body > .ft) .ft-line { color: var(--c-text-read); }
:is(body > .hd, body > .ft) .ft-about, :is(body > .hd, body > .ft) .ft-stats { color: var(--c-muted); font-size: var(--t-small); margin-top: var(--s-3); }
:is(body > .hd, body > .ft) .ft-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
:is(body > .hd, body > .ft) .ft-nav a, :is(body > .hd, body > .ft) .ft-b { display: inline-flex; align-items: center; min-height: var(--hit-min); color: var(--c-text-read); font-size: var(--t-ui); text-align: left; }
:is(body > .hd, body > .ft) .ft-nav a:hover, :is(body > .hd, body > .ft) .ft-b:hover { color: var(--c-text); }
:is(body > .hd, body > .ft) .ft-honesty { color: var(--c-text-read); font-size: var(--t-small); max-width: 60em; }
@media (min-width: 48em) { :is(body > .hd, body > .ft) .ft-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } :is(body > .hd, body > .ft) .ft-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } :is(body > .hd, body > .ft) .ft-honesty, :is(body > .hd, body > .ft) .ft-stats { grid-column: 1 / -1; } }
@media (min-width: 64em) { :is(body > .hd, body > .ft) .ft-in { padding-bottom: var(--s-9); } }
:is(body > .hd, body > .ft) .sheet { border: 1px solid var(--c-edge); border-radius: var(--r-sheet); background: var(--c-surface); color: var(--c-text-read); padding: var(--s-7); width: min(480px, calc(100vw - 32px)); max-height: 85dvh; box-shadow: var(--el-sheet); }
:is(body > .hd, body > .ft) .sheet::backdrop { background: color-mix(in srgb, var(--c-bg) 70%, transparent); }
:is(body > .hd, body > .ft) .sheet h2 { font-family: var(--sans); font-weight: var(--w-strong); font-size: var(--t-stat); letter-spacing: 0; margin-bottom: var(--s-4); outline: none; }
:is(body > .hd, body > .ft) .sheet p { margin-bottom: var(--s-4); }
:is(body > .hd, body > .ft) :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
body > .hd { position: sticky; top: var(--ribbon-now, 0px); z-index: 40; }
body.world > .hd { position: relative; }

/* overlay/v3/css/chrome/studio.css */
/* /studio in the v3 chrome (owner: pixel, nova veto 2): the kit tags read as the site's Demo chip, sentence case, no amber, no caps.
   The kit app.css tokens (--sf2, --ln2, --fgl, --mono) are the same values as the v3 ones. */
body[data-page="studio"] .stu .tag { text-transform: none; letter-spacing: 0.01em; font-size: 0.75rem; padding: 4px 6px; border-radius: 2px; color: var(--fgl); border: 1px solid var(--ln2); background: var(--sf2); vertical-align: middle; }
/* iris r2 R3: the feed cards in kit chrome. 13 px floor, Inter, sentence case; dt reads like the move-log dl (13/18, muted). Faces are the dev's own pfp v1. */
body[data-page="studio"] .stu :is(.dd-wb > small, .dd-wb dl > div, .dd-wb dt, .dd-wb dd, .dd-wb code, .dd-pfi i, .dd-kindb, .stu-count, .dd-chips button, .dd-mu) { font-size: 0.8125rem; line-height: 1.375; }
body[data-page="studio"] .stu .dd-wb dt { font-family: var(--sans); letter-spacing: 0; text-transform: none; color: var(--mu); }
body[data-page="studio"] .stu .dd-wb dl > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
body[data-page="studio"] .stu .dd-kindb { font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 8px; gap: 6px; }
body[data-page="studio"] .stu .dd-kindb svg { width: 10px; height: 10px; }
body[data-page="studio"] .stu .dd-pfi i, body[data-page="studio"] .stu .stu-count { font-family: var(--sans); }
body[data-page="studio"] .stu .dd-st { font-size: 0.8125rem; }
body[data-page="studio"] .stu .dd-wb > b { padding-right: 96px; }
body[data-page="studio"] .dd-ph { position: absolute; pointer-events: none; aspect-ratio: 16 / 14; }
body[data-page="studio"] .dd-ph svg, body[data-page="studio"] .dd-cav svg { display: block; inline-size: 100%; block-size: 100%; image-rendering: pixelated; }
body[data-page="studio"] .dd-cav { display: inline-block; inline-size: 24px; block-size: 21px; vertical-align: -5px; margin-inline-end: 6px; }

/* overlay/v3/css/chrome/world-toggle.css */
/* the preview ribbon (src/preview.js) sits above the bar on /world too: same offset as the v3 pages (base.css --ribbon-now), so the box matches /world/city */
body:has(> .v3-ribbon) > .world-toggle { --ribbon-now: 24px; }
/* the World view toggle on /world (owner: pixel, components GC20, layouts LG3.1/LG3.4): the same box as on /world/city (css/city.css), fixed under
   the header, the galaxy top bar clears it. The World page has its own :root tokens (base.css, same names); the two v3 layout values the toggle
   needs are restated here: --chrome-top = the v3 header (tokens.css --hd-h 56) and --q-inset (base.css: 16, 24 from 64em). */
body > .world-toggle { --chrome-top: 56px; --q-inset: 16px; --toggle-h: 32px; --seg: 72px; position: fixed; z-index: 19; top: calc(var(--ribbon-now, 0px) + var(--chrome-top) + (48px - var(--toggle-h)) / 2); left: calc(var(--sb-w, 0px) + var(--q-inset));
  display: flex; height: var(--toggle-h); padding: 1px; border: 1px solid var(--c-control); border-radius: var(--r-pill); background: var(--bg); font-family: var(--sans); }
@media (pointer: coarse) { body > .world-toggle { --toggle-h: 40px; --seg: 84px; } }
@media (min-width: 64em) { body > .world-toggle { --q-inset: 24px; } }
body > .world-toggle .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body > .world-toggle a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: var(--seg); border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--mu); font-weight: 600; font-size: var(--t-ui); text-decoration: none; }
body > .world-toggle a:hover { color: var(--fg); }
body > .world-toggle a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
body > .world-toggle .tick { fill: currentColor; visibility: hidden; }
body > .world-toggle a[aria-current="page"] { background: var(--sf3); color: var(--fg); border-color: var(--fg); }
body > .world-toggle a[aria-current="page"] .tick { visibility: visible; }
body.world .topbar { padding-inline-start: calc(16px + 2 * 72px + 4px + 16px); }
@media (pointer: coarse) { body.world .topbar { padding-inline-start: calc(16px + 2 * 84px + 4px + 16px); } }
@media (min-width: 64em) { body.world .topbar { padding-inline-start: calc(24px + 2 * 72px + 4px + 16px); } }
@media (min-width: 64em) and (pointer: coarse) { body.world .topbar { padding-inline-start: calc(24px + 2 * 84px + 4px + 16px); } }

/* overlay/v3/css/shell/shell.css */
/* v3 sidebar shell (owner: pixel; iris HC0 to HC4, layouts LH1). Built into /v3/css/shell.css (v3 pages) and appended to /v3/css/chrome.css (World
   chrome pages), so selectors never lean on .v3. Desktop sidebar is CSS only; the Menu sheet (under 64em) is the same nav, opened by core.js. */
:root { --sb-w: 0px; --sb-item: 40px; --sb-sub: 36px; --sb-inset: 20px; --sb-row-m: 48px; --sb-sub-m: 44px; --sb-hb: 40px; }
@media (min-width: 64em) { :root { --sb-w: 240px; } body:has(> .sb) { padding-inline-start: var(--sb-w); } }
@media (pointer: coarse) { :root { --sb-item: 44px; --sb-sub: 44px; --sb-hb: 44px; } }
@media (min-width: 64em) and (max-width: 79.99em) { :root.v3 { --gutter: 24px; } }
@media (min-width: 80em) { :root.v3 { --gutter: 28px; } }

/* World chrome: the galaxy's own :root has another --sans and --hd-h; the shell keeps the v3 values (tokens.css) so the bar is the same on every page */
body > :is(.hd--sb, .sb) { --sans: "DL Inter", "DL Inter Fallback", system-ui, sans-serif; --hd-h: 56px; font-family: var(--sans); }
body > .hd--sb .hd-in { block-size: var(--hd-h); min-block-size: var(--hd-h); }
/* top bar: the kit header row, without its nav; the right group ends on the content edge */
.hd--sb .hd-in { max-width: calc(1224px + 2 * var(--gutter)); }
.hd--sb .hd-act { gap: var(--s-4); }
.hb-x { display: inline-grid; place-items: center; inline-size: var(--sb-hb); block-size: var(--sb-hb); flex: none; background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--step); color: var(--c-text); }
.hb-x:hover, .hb-ca:hover { border-color: var(--c-text); }
.hb-x:active { background: var(--c-surface-2); }
.hb-ca { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--sb-hb); padding: 0 var(--s-4); background: var(--c-surface); border: 1px solid var(--c-control); border-radius: var(--r2); color: var(--c-muted); font: var(--w-strong) var(--t-small)/1 var(--sans); }
.hb-ca .num { color: var(--c-text-read); font-size: var(--t-mono); }
.hb-ca i { inline-size: 1px; align-self: stretch; margin-block: var(--s-3); background: var(--c-edge); }
.hb-ca b { font: var(--w-mono) var(--t-mono) var(--mono); color: var(--c-text-read); }
.hb-ca b::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: var(--s-2); background: var(--c-success); clip-path: polygon(0 50%, 25% 50%, 37% 75%, 75% 0, 100% 0, 37% 100%); }
@media (min-width: 64em) { body > .hd--sb .brand, .sb .hb-ca, .sb-m, .sb-mh { display: none; } }
/* the sidebar logo carries its own type: on the World chrome pages the header rules are scoped to body > .hd only */
.sb-logo { color: var(--c-text); text-decoration: none; }
.ft-h { margin-block-end: var(--s-2); font: var(--w-strong) var(--t-small)/18px var(--sans); color: var(--c-muted); } .sb-logo img { image-rendering: pixelated; }
.sb-logo .brand-name { font-family: var(--head); font-weight: var(--w-head); font-size: var(--t-stat); letter-spacing: var(--tr-head); color: var(--c-text); }
@media (max-width: 63.99em) { .hd--sb .hb-ca { display: none; } }
@media (max-width: 63.99em) { body > .hd--sb .hd-in { gap: var(--s-3); } body > .hd--sb .hd-act { gap: var(--s-3); } body > .hd--sb .wallet-btn { min-height: var(--sb-hb); padding-inline: var(--s-4); } body > .hd--sb .menu-btn { padding-inline: var(--s-2); gap: var(--s-2); min-inline-size: 44px; justify-content: center; font-weight: var(--w-strong, 600); } }
/* the bar holds logo, X, Connect wallet and Menu: under 26em the logo is the mark alone (iris accepted); the wordmark stays its accessible name */
@media (max-width: 25.99em) { body > .hd--sb .brand .brand-name { display: inline !important; position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 22.49em) { .hd--sb .hb-x { display: none; } }
/* iris r2 R6: the base.css under-368 px rule does not load on /world and /studio: Menu keeps its word as the accessible name, the glyph shows at 44 x 44 */
@media (max-width: 23em) { body > .hd--sb .menu-btn > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* sidebar */
.sb { font-family: var(--sans); font-size: var(--t-ui); line-height: 20px; background: var(--c-bg); color: var(--c-muted); }
.sb ul { list-style: none; margin: 0; padding: 0; }
.sb-list a, .sb-more { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-height: var(--sb-item); padding: 0 var(--sb-inset); color: var(--c-muted); font-weight: var(--w-strong); text-align: start; text-decoration: none; background: none; border: 0; cursor: pointer; }
.sb-sub a { min-height: var(--sb-sub); padding-inline-start: 32px; font-weight: var(--w-body); color: var(--c-text-read); }
.sb-list a:hover, .sb-more:hover { color: var(--c-text); background: var(--c-surface-2); }
.sb-list a:active, .sb-more:active { background: var(--c-surface-3); }
.sb a:focus-visible, .sb button:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); outline: none; }
.sb-list a[aria-current="page"] { color: var(--c-text); background: var(--c-surface-2); box-shadow: inset 2px 0 0 var(--c-text); }
.sb-list a[aria-current="page"]:focus-visible { box-shadow: inset 2px 0 0 var(--c-text), inset 0 0 0 2px var(--c-focus); }
.sb-more[aria-expanded="true"] { color: var(--c-text); }
.sb-more[aria-expanded="true"] svg { transform: scaleY(-1); }
.sb-g::before { content: ""; display: block; block-size: 1px; margin: var(--s-4) var(--sb-inset); background: var(--c-line); }
.sb-sub:has([aria-current]) { display: block; }
.sb-mh { margin: var(--s-5) 0 var(--s-2); padding-inline: var(--sb-inset); font: var(--w-strong) var(--t-small)/18px var(--sans); color: var(--c-muted); }
@media (min-width: 64em) {
  body:has(> .v3-ribbon) > .sb { inset-block-start: var(--ribbon-h, 24px); }
  .sb { position: fixed; z-index: 21; inset-block: var(--ribbon-now, 0px) 0; inset-inline-start: 0; inline-size: var(--sb-w); overflow-y: auto; overscroll-behavior: contain; border-inline-end: 1px solid var(--c-line); }
  .sb-logo { display: flex; align-items: center; gap: var(--s-3); block-size: var(--hd-h, 56px); padding-inline: var(--sb-inset); margin-block-end: var(--s-3); }
}

/* Menu sheet: the same nav, fixed under the bar; core.js toggles .sb-open, inert on the page and the scroll lock */
@media (max-width: 63.99em) {
  .sb { display: none; }
  .sb.sb-open { display: block; position: fixed; z-index: var(--z-sheet, 60); inset: calc(var(--ribbon-now, 0px) + var(--hd-h, 56px)) 0 0 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--s-8); }
  .sb .sb-logo, .sb .sb-more { display: none; }
  .sb .sb-sub[hidden] { display: block !important; }
  .sb-list a { min-height: var(--sb-row-m); font-size: var(--t-stat); color: var(--c-text); }
  .sb-sub a { min-height: var(--sb-sub-m); font-size: var(--t-body); color: var(--c-text-read); }
  .sb-pin { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-5) var(--sb-inset) 0; }
  .sb-pin > * { display: inline-flex; align-items: center; min-height: var(--sb-sub-m); padding: 0 var(--s-4); background: var(--c-surface-2); border-radius: var(--step); color: var(--c-text); font-weight: var(--w-strong); }
  .sb-hon { padding: var(--s-5) var(--sb-inset) 0; font-size: var(--t-small); line-height: 18px; color: var(--c-muted); }
  html.menu-open { overflow: hidden; }
}
@media (min-width: 22.5em) { .sb-x { display: none !important; } }
/* r16: "My profile" by the wallet button (desktop top bar) and in the menu, shown once a wallet is connected (core.js paintWallet) */
.hd-me, [data-my-profile-box][hidden] { display: none !important; }
@media (min-width: 64em) { .hd-me:not([hidden]) { display: inline-flex !important; align-items: center; min-height: var(--sb-hb); padding-inline: var(--s-3); color: var(--c-text-read); font: var(--w-strong) var(--t-ui)/1 var(--sans); } .hd-me:hover { color: var(--c-text); } }