/* Homepage stage. Desktop: the approved 1678×937 composition, scaled fluidly with container units
   (1cqw = 1% of stage width). Phone (<1024px): the same elements reflowed, per D5. */
.nx-stage-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--nx-void); overflow: hidden; }
.nx-stage { position: relative; width: min(100vw, 100vh * 1678 / 937); aspect-ratio: 1678 / 937; container-type: inline-size; overflow: hidden; background: var(--nx-void) url(/static/img/background.png) center / cover no-repeat; box-shadow: 0 0 60px rgba(11, 222, 251, .4), 0 0 120px rgba(242, 9, 243, .3); }
.nx-stage > * { position: absolute; }

/* The grid floor is drawn on the VFX canvas (vfx.js: the prototype's synthwave grid, lifted 2026-10-13). */

.nx-vfx, .nx-cursor { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.nx-vfx { z-index: 0; }
.nx-cursor { z-index: 40; }

/* 1. Logo */
/* Composition (docs/10 §6.1): three columns — nav pod | hero | HUD — whose art shares one top line (the 24 px margin)
   and one bottom line (just above the horizon at 77%); the logo, the action pair and the search sit on the centre
   axis; the floor row (sound · X · search · the three stickers) shares one centre line. Boxes are computed from each
   image's measured visible bounds, so the art — not the boxes — lines up. */
.nx-logo { left: 29.14%; top: -1.04%; width: 41.72%; height: 31.4%; margin: 0; z-index: 5; }
.nx-logo img { width: 100%; height: 100%; object-fit: contain; display: block; animation: nxBreathe 4s ease-in-out infinite; }
@keyframes nxBreathe { 0%, 100% { filter: drop-shadow(0 0 15px rgba(11, 222, 251, .4)); } 50% { filter: drop-shadow(0 0 28px rgba(242, 9, 243, .6)); } }

/* Art-backed buttons (account bar, sound toggle) — owner art 2026-10-13 (D23) */
.nx-artbtn { display: block; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none; z-index: 6; }
.nx-artbtn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: filter .15s ease; }
.nx-artbtn:hover img { filter: drop-shadow(0 0 12px var(--nx-cyan)) brightness(1.12); }
.nx-artbtn:active img { filter: drop-shadow(0 0 16px var(--nx-magenta)) brightness(1.2); }
/* Account bar: the person badge is drawn; the handle (or LOG IN) is live text in the blank bar. */
.nx-account { left: 79.05%; top: 2.56%; width: 16.12%; height: 10.46%; }
.nx-account .label { position: absolute; left: 35.5%; top: 52%; width: 41.5%; transform: translateY(-50%); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 1.2cqw/1.1 var(--nx-font-display); letter-spacing: .05em; color: var(--nx-acid-text); text-shadow: var(--nx-text-outline), 0 0 10px var(--nx-cyan); }
/* Sound: two drawn states; the live label is for screen readers (and the M hotkey's toast). */
.nx-sound { left: 3.434%; top: 82.924%; width: 12.515%; height: 7.471%; }
.nx-sound[aria-pressed="true"] .off, .nx-sound:not([aria-pressed="true"]) .on { visibility: hidden; }
.nx-sound .label { position: absolute; left: -9999px; }

/* 3. Nav pod: the frame's five sockets hold the five service buttons. The sockets are not perfectly even, so each
   button has its own box, measured on PanelNav.png (1024×1535) and calibrated on the owner's fit example
   (PanelNav-fit-example.jpg): a button spans its socket's interior plus 7 px left / 8 px right, and sits 4 px below
   the socket's centre line; its height follows its own aspect ratio. Percentages are of the frame. */
.nx-nav { left: 1.03%; top: 1.79%; width: 28.84%; height: auto; aspect-ratio: 1024 / 1535; z-index: 6; }
.nx-nav > .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.nx-pill { position: absolute; display: block; border-radius: 999px; transition: transform .15s ease; }
.nx-pill.forum { left: 13.67%; top: 14.33%; width: 63.87%; height: 13.56%; }
.nx-pill.chats { left: 13.96%; top: 28.61%; width: 63.67%; height: 13.72%; }
.nx-pill.pages { left: 13.96%; top: 43.22%; width: 63.67%; height: 13.3%; }
.nx-pill.mail { left: 13.87%; top: 57.46%; width: 63.77%; height: 13.28%; }
.nx-pill.arcade { left: 13.77%; top: 71.87%; width: 63.87%; height: 13.19%; }
.nx-pill img { width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .15s ease; }
/* Hover never moves a button out of its socket: the glow is the feedback; a press dips it slightly. */
.nx-pill:hover img { filter: drop-shadow(0 0 10px var(--nx-cyan)) drop-shadow(0 0 22px var(--nx-magenta)) brightness(1.12); }
.nx-pill:active { transform: scale(.96); }
.nx-pill:focus-visible, .nx-cta:focus-visible, .nx-artbtn:focus-visible, .nx-search .go:focus-visible { outline: 3px solid var(--nx-acid); outline-offset: 2px; }

/* 4. Flux */
.nx-flux-btn { left: 28.86%; top: 27.94%; width: 22.65%; height: 40.55%; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 4; animation: nxLevitate 4.5s ease-in-out infinite; }
.nx-flux-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nx-flux-btn:hover img { filter: drop-shadow(0 0 30px var(--nx-cyan)) brightness(1.1); }
.nx-ripple { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 4px solid var(--nx-cyan); box-shadow: 0 0 25px var(--nx-magenta), inset 0 0 25px var(--nx-cyan); pointer-events: none; animation: nxRipple 1.2s ease-out forwards; }
@keyframes nxRipple { to { width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0; border-width: 1px; } }

/* 5. Copy block */
.nx-copy { left: 52.58%; top: 36.85%; width: 18.08%; height: 22.41%; display: flex; flex-direction: column; justify-content: center; gap: .5cqw; transform: rotate(-4deg); font-family: var(--nx-font-display); text-transform: uppercase; line-height: .95; text-shadow: 3px 3px 0 #040212, -1px -1px 0 #040212, 1px -1px 0 #040212, -1px 1px 0 #040212; z-index: 3; }
.nx-copy .h { font-size: 3.1cqw; background: var(--nx-grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(3px 3px 0 #040212); }
.nx-copy .s { font-size: 1.67cqw; color: var(--nx-ice); }
.nx-copy .m { font-size: .9cqw; color: var(--nx-acid); letter-spacing: .06em; }

/* 6. CTAs: SIGN UP / LOOK AROUND art (signed-in visitors get LOOK AROUND alone, centred) */
.nx-ctas { left: 35.95%; top: 67.34%; width: 28.1%; height: 8.54%; display: flex; justify-content: center; gap: 1.07cqw; z-index: 6; }
.nx-cta { flex: 0 1 50%; display: block; transition: transform .15s ease; }
.nx-cta img { width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .15s ease; }
.nx-cta:hover { transform: translateY(-2px); }
.nx-cta:hover img { filter: drop-shadow(0 0 10px var(--nx-magenta)) drop-shadow(0 0 18px var(--nx-cyan)) brightness(1.12); }
.nx-cta:active { transform: scale(.96); }

/* 7. HUD */
.nx-hud { left: 75.42%; top: 13.87%; width: 23.55%; height: 63.27%; z-index: 6; }
.nx-hud > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nx-hud-screen { position: absolute; left: 19%; top: 12.5%; width: 60%; height: 54%; padding: .25cqw .1cqw; display: flex; flex-direction: column; gap: 1px; overflow: hidden; text-shadow: 1px 1px 0 #040212, 0 0 6px rgba(0, 0, 0, .8); }
.nx-hud-head { display: flex; justify-content: space-between; align-items: center; font: 600 .66cqw var(--nx-font-console); color: var(--nx-acid); letter-spacing: .1em; border-bottom: 1px solid rgba(11, 222, 251, .4); padding: 0 .25cqw .3cqw; margin-bottom: .2cqw; }
.nx-hud-head .pos { color: var(--nx-ice); }
.nx-hud-row { display: flex; align-items: center; gap: .35cqw; padding: .24cqw .3cqw; border-radius: 4px; text-decoration: none; color: var(--nx-text); font: .69cqw/1.2 var(--nx-font-console); text-transform: uppercase; white-space: nowrap; overflow: hidden; border-left: 2px solid transparent; }
.nx-hud-row span:last-child { overflow: hidden; text-overflow: ellipsis; }
.nx-hud-row:hover { background: rgba(11, 222, 251, .12); color: #fff; }
.nx-hud-row.is-sel { background: rgba(242, 9, 243, .18); border-left-color: var(--nx-magenta); color: #fff; }
.nx-hud-row .empty { color: var(--nx-text-dim); white-space: normal; }
.nx-c-pink { color: var(--nx-magenta); } .nx-c-acid { color: var(--nx-acid); } .nx-c-cyan { color: var(--nx-cyan); } .nx-c-volt { color: var(--nx-volt); } .nx-c-ice { color: var(--nx-ice); }
.nx-hud-btn { position: absolute; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.nx-hud-btn:hover { box-shadow: 0 0 18px var(--nx-cyan); }
.nx-hud-btn:active { box-shadow: 0 0 24px var(--nx-magenta); }
.nx-hud-btn.pill { border-radius: 20px; text-decoration: none; }
.nx-hud-up { left: 14.5%; top: 73%; width: 8%; height: 6.5%; } .nx-hud-down { left: 14.5%; top: 89.5%; width: 8%; height: 6.5%; }
.nx-hud-left { left: 7%; top: 80.5%; width: 7%; height: 7.5%; } .nx-hud-right { left: 21.5%; top: 80.5%; width: 7%; height: 7.5%; }
.nx-hud-home { left: 31%; top: 73%; width: 11%; height: 8%; } .nx-hud-gear { left: 31%; top: 83%; width: 11%; height: 9%; }
.nx-hud-open { left: 45%; top: 74%; width: 36%; height: 6%; } .nx-hud-all { left: 45%; top: 85%; width: 36%; height: 7%; }
.nx-hud-screen.scan::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .28) 50%); background-size: 100% 3px; border-radius: 6px; }

/* 8. Search: the blank bar art with a real input in its well; the lens focuses it, the chevrons submit. */
.nx-search { left: 34.79%; top: 82.18%; width: 30.42%; height: 8.96%; margin: 0; z-index: 6; }
.nx-search > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.nx-search .lens { position: absolute; left: 0; top: 0; width: 15%; height: 100%; cursor: text; border-radius: 50%; }
.nx-search input { position: absolute; left: 17.5%; top: 24%; width: 68%; height: 52%; padding: 0 .4cqw; background: transparent; border: 0; outline: 0; border-radius: 6px; color: var(--nx-text); font: 1cqw var(--nx-font-body); caret-color: var(--nx-acid); }
.nx-search input::placeholder { color: rgba(201, 214, 255, .62); }
.nx-search input:focus-visible { box-shadow: inset 0 0 0 2px rgba(11, 222, 251, .55); }
.nx-search .go { position: absolute; left: 86.5%; top: 12%; width: 9.5%; height: 76%; background: transparent; border: 0; border-radius: 14px; cursor: pointer; }
.nx-search .go:hover { box-shadow: 0 0 16px var(--nx-acid), inset 0 0 12px rgba(214, 255, 31, .35); }

/* 9. The X (EE-01) */
/* The owner's crystal X (2026-10-14), 108 × 112 px of art: about the stickers' height, so the floor row reads as one
   family; centred between the sound switch and the search (54 px either side), on the floor line. */
.nx-x { left: 26.810%; top: 81.110%; width: 5.959%; height: 11.099%; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 6; }
.nx-x img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nx-x:hover img, .nx-x.found img { filter: drop-shadow(0 0 14px var(--nx-cyan)) brightness(1.15); }

/* 10. The Messenger (docs/64 §7): between the sound switch and the X; the number is unread messages from members. */
.nx-im { left: 17.983%; top: 80.576%; width: 6.794%; height: 12.166%; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 6; }
.nx-im img { width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .15s ease, transform .15s ease; }
.nx-im:hover img, .nx-im:focus-visible img { filter: drop-shadow(0 0 12px var(--nx-magenta)) brightness(1.12); transform: scale(1.06) rotate(-3deg); }
.nx-im .nx-badge { top: 2%; right: 0; min-width: 1.4cqw; height: 1.4cqw; padding: 0 .35cqw; border-radius: .7cqw; font-size: .85cqw; line-height: 1.4cqw; }

/* 11. Directory stickers — the owner's self-labelled art (2026-10-14). Optical sizing: equal heights make the square
   DOWNLOADS splash look small and equal areas make it look big, so each sticker's height goes with aspect^-0.25
   (TorrentZ 166 × 112, WebRing & Links 191 × 107, DOWNLOADS 128 × 123 px of art) — they read as one size. The group
   runs from 54 px past the search (the same gap as X ↔ search ↔ sound) to the HUD's right edge, the stickers 14 px
   apart, each centred on the floor line and tilted a little (docs/10 §4: −6° to +6°; hover straightens and lifts),
   none overlapping. The labels are drawn in: alt text names them. */
.nx-dirs { left: 67.125%; top: 77.322%; width: 31.536%; height: 18.903%; z-index: 6; }
.nx-sticker { position: absolute; top: 0; height: 100%; display: block; text-decoration: none; transition: transform .15s ease; }
.nx-sticker img { position: absolute; object-fit: contain; transform: rotate(var(--tilt, 0deg)); transition: filter .15s ease, transform .18s ease; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.nx-sticker:hover img, .nx-sticker:focus-visible img { transform: rotate(0deg) scale(1.08); filter: drop-shadow(0 0 12px var(--nx-cyan)) brightness(1.1); }
.nx-sticker:hover { z-index: 1; }
.nx-sticker img { left: 0; width: 100%; }
.nx-sticker.torrents { left: 0.00%; width: 32.68%; --tilt: -3deg; } .nx-sticker.torrents img { top: 16.53%; height: 65.78%; }
.nx-sticker.links { left: 35.01%; width: 37.60%; --tilt: 2deg; } .nx-sticker.links img { top: 18.03%; height: 62.77%; }
.nx-sticker.downloads { left: 74.95%; width: 25.05%; --tilt: -2.5deg; } .nx-sticker.downloads img { top: 13.48%; height: 71.87%; }

/* 12. Status bar */
.nx-status { left: 0; bottom: 0; width: 100%; height: 3.6%; z-index: 7; background: var(--nx-ink); border-top: 2px solid var(--nx-cyan); display: flex; align-items: center; gap: .6cqw; padding: 0 .7cqw; font: .66cqw var(--nx-font-console); letter-spacing: .06em; color: var(--nx-text-dim); white-space: nowrap; overflow: hidden; }
.nx-status .counter { color: var(--nx-acid); background: #031a0a; border: 1px solid #39ff8a; padding: .1cqw .35cqw; }
.nx-status .badge { border: 1px solid currentColor; padding: .1cqw .35cqw; }
.nx-status .spacer { flex: 1; }
.nx-status a { color: var(--nx-text); text-decoration: none; border: 1px solid var(--nx-text-dim); padding: .1cqw .5cqw; }
.nx-status a.hot { color: var(--nx-volt); border-color: var(--nx-volt); }


/* ---- Phone reflow (<1024px): same art, stacked. docs/10-design-system.md §6.2 ---- */
@media (max-width: 1023px) {
  .nx-stage-wrap { display: block; }
  .nx-stage { width: 100%; aspect-ratio: auto; min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 16px 0; background-attachment: fixed; container-type: normal; box-shadow: none; }
  .nx-stage > *, .nx-topline > *, .nx-hero > * { position: relative; left: auto; top: auto; width: auto; height: auto; }
  /* The floor, the lightning and the trail on a phone (vfx.js, fixed): both canvases cover the screen, the floor's at
     the back so it stays a plane along the bottom of the screen while the page scrolls over it. */
  .nx-stage > .nx-vfx, .nx-stage > .nx-cursor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .nx-stage > .nx-vfx { z-index: 0; }
  .nx-stage > .nx-cursor { z-index: 40; }
  .nx-topline { order: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .nx-account { position: relative; width: 168px; height: 61px; }
  .nx-sound { position: relative; width: 162px; height: 54px; }
  .nx-account .label { font-size: 14px; }
  .nx-logo { order: 1; width: min(358px, 100%); height: 140px; }
  .nx-search { order: 2; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1475 / 243; }
  .nx-search input { font-size: 16px; padding: 0 6px; }
  .nx-hero { order: 3; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .nx-flux-btn { position: relative; width: 200px; height: 200px; }
  .nx-copy { position: relative; width: 100%; height: auto; transform: none; text-align: center; gap: 6px; }
  .nx-copy .h { font-size: 30px; } .nx-copy .s { font-size: 18px; } .nx-copy .m { font-size: 12px; }
  .nx-ctas { position: relative; width: 100%; max-width: 420px; height: auto; aspect-ratio: 5.8; gap: 10px; margin-top: 8px; }
  .nx-nav { order: 4; width: 320px; height: auto; aspect-ratio: 1024 / 1535; margin-left: 21px; } /* the frame's art sits left of its canvas centre */
  .nx-nav > .frame, .nx-pill { position: absolute; }
  /* The three stickers in one row, the same equal-art-area proportions as on desktop. */
  .nx-dirs { order: 5; width: 100%; max-width: 440px; height: auto; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
  .nx-sticker { position: relative; left: auto !important; top: auto !important; height: auto !important; flex: none; }
  .nx-sticker img { position: static !important; display: block; width: 100% !important; height: auto !important; }
  .nx-sticker.torrents { width: 33.5% !important; } .nx-sticker.links { width: 38.5% !important; } .nx-sticker.downloads { width: 25.7% !important; }
  .nx-sticker:hover img { transform: rotate(var(--tilt, 0deg)); } /* no hover on touch: the tilt stays */
  /* The X and the Messenger share a row: each centred, then nudged apart (the flex gap is 14 px). */
  .nx-x { order: 6; width: 86px; height: 90px; margin: 0 auto; transform: translateX(-54px); }
  .nx-im { order: 6; width: 84px; height: 84px; margin-top: -101px; transform: translateX(54px); }
  .nx-im .nx-badge { top: 0; right: -2px; }
  .nx-hud { order: 7; width: 100%; height: auto; border: 3px solid var(--nx-cyan); border-radius: 10px; background: var(--nx-deep); box-shadow: var(--nx-glow-cyan); overflow: hidden; }
  .nx-hud > img { display: none; }
  .nx-hud-screen { position: relative; left: auto; top: auto; width: 100%; height: auto; background: var(--nx-ink); padding: 8px; text-shadow: none; }
  .nx-hud-head { font-size: 12px; padding: 9px 6px; background: var(--nx-grad-chrome); color: var(--nx-void); border-radius: 4px; margin-bottom: 6px; } .nx-hud-head .pos { color: var(--nx-void); }
  .nx-hud-row { font-size: 12px; min-height: 40px; gap: 8px; padding: 6px 8px; }
  .nx-hud-ctl { display: flex; gap: 8px; padding: 10px; }
  .nx-hud-btn { position: relative; left: auto !important; top: auto !important; width: 44px !important; height: 44px !important; border-radius: 22px; border: 1px solid var(--nx-cyan); background: var(--nx-ink); color: var(--nx-text); font: 600 12px var(--nx-font-console); }
  .nx-hud-btn.pill { width: auto !important; padding: 0 14px; }
  .nx-hud-up, .nx-hud-down, .nx-hud-home, .nx-hud-gear, .nx-hud-open { display: none; }
  .nx-hud-all { margin-left: auto; background: var(--nx-acid); color: var(--nx-void); border-color: var(--nx-acid); display: inline-flex; align-items: center; text-decoration: none; }
  .nx-hud-btn .k { display: inline; }
  .nx-status { order: 8; position: relative; width: calc(100% + 32px); margin: 10px -16px 0; height: auto; flex-wrap: wrap; white-space: normal; padding: 8px 10px; font-size: 11px; gap: 8px; }
  .nx-status .counter, .nx-status .badge { padding: 2px 6px; } .nx-status a { padding: 6px 8px; }
  .nx-status .hotkeys { display: none; }
}
@media (min-width: 1024px) {
  .nx-topline, .nx-hero { display: contents; }
  .nx-account, .nx-sound, .nx-flux-btn, .nx-copy, .nx-ctas { position: absolute; }
  .nx-hud-ctl { display: contents; }
  .nx-hud-btn .k { position: absolute; left: -9999px; }
}
/* The torrent miniclient on the stage: in the gap between the logo and the account bar, centred on the bar, sized with
   the stage; the rates live in its tooltip here. Only when there is something to show. */
@media (min-width: 1024px) {
  .nx-topline .nx-mini { position: absolute; right: 21.2%; top: 7.8%; transform: translateY(-50%); height: 2.1cqw; padding: 0 .3cqw 0 .7cqw; gap: .3cqw; font-size: .8cqw; border-radius: 1.05cqw; z-index: 6; }
  .nx-topline .nx-mini-btn { width: 1.6cqw; height: 1.6cqw; border-radius: .8cqw; font-size: .8cqw; }
  .nx-topline .nx-mini-rates { display: none; }
}
/* The music volume on the stage: a slim bar set on top of the sound switch, the same piece, scaled with the stage
   (--u is one design pixel of the 1678-wide composition). */
@media (min-width: 1024px) {
  .nx-topline .nx-vol { --u: calc(100cqw / 1678); --strut: 11; position: absolute; left: 5.150%; top: 80.149%; width: 9.082%; z-index: 7; }
}
/* Phone: the switch and its bar stay one piece in the first row; the miniclient sits between them and the account. */
@media (max-width: 1023px) {
  .nx-topline { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "vol . ." "sound mini account"; align-items: center; column-gap: 8px; row-gap: 3px; }
  .nx-topline .nx-vol { grid-area: vol; justify-self: center; width: 118px; --u: 1.1px; --strut: 5; }
  .nx-topline .nx-sound { grid-area: sound; } .nx-topline .nx-account { grid-area: account; } .nx-topline .nx-mini { grid-area: mini; justify-self: center; }
}