/* Pro's gold is a product identity, not an entitlement or a price movement. */
.nav .nav-pro { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #c7a260; border-radius: 8px; background: #f0dbab; color: #302414; font: 700 14px/1 var(--font); text-decoration: none; }
.you-panel .you-pro { display: flex; justify-content: space-between; gap: 12px; }
.you-pro span { font-size: 11px; color: var(--ink-2); }
.pro-discovery { box-sizing: border-box; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 30px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px #0006; }
.pro-discovery::backdrop { background: #0009; }
.pro-discovery-close { display: block; margin-left: auto; min-height: 44px; min-width: 64px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer; }
.pro-discovery-kicker { font: 500 11px/1.6 var(--mono); letter-spacing: .1em; color: var(--ink-2); margin-top: 22px; }
.pro-discovery h2 { font: var(--font-display-weight,700) 32px/1.15 var(--font-display,var(--font)); letter-spacing: -.025em; }
.pro-discovery p { line-height: 1.7; color: var(--ink-2); }
.pro-discovery-action { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 16px; margin-top: 24px; border-radius: 8px; background: #f0dbab; color: #302414; text-align: center; font-weight: 600; text-decoration: none; }
.pro-discovery .pro-discovery-note { font-size: 12px; text-align: center; }
.pro-discovery :focus-visible, .nav .nav-pro:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
@media(max-width: 1150px) { .nav .nav-pro { display: none; } }

/* ═══════════════════════════════════════════════════ chaserr site chrome
 *
 * The header, the command bar, and the motion system everything else borrows
 * from. Loaded after app.css, so anything here that repeats a selector there
 * is a deliberate override.
 *
 * The rule the whole file follows, and the reason it does not read as a
 * screensaver: **motion is either feedback or orientation.** A thing moves
 * because you touched it (feedback), or because it is telling you where you
 * are and where it came from (orientation). Nothing moves to be impressive.
 * The one exception is the brand mark, which drifts on its own — a logo is
 * allowed to be alive because it is the one element with nothing to say.
 */

/* Optional catalogue art is evidence, not layout. Component display rules
   must never revive an image that failed to load or decode. */
img[data-optional-art][hidden] { display: none !important; }
img[data-collection-art][hidden] { display: none !important; }
[data-collection-art-fallback][hidden] { display: none !important; }

:root {
  /* Fast out, long settle. Reads as momentum rather than as a timer. */
  --ease-out:    var(--ease-holo);
  /* Overshoots. For things that *arrive* — panels, the ink bar, a result row. */
  --ease-spring: var(--ease-holo);
  --t-fast: var(--m-hover);
  --t-mid:  var(--m-move);
  --t-slow: var(--m-arrive);

  /* Published by .nav below and kept current by chrome.js, so the browse panel
     can align to the page gutter instead of to the summary that opened it. */
  --nav-pad: 26px;
  --nav-h: 59px;
  --mobile-dock-clearance: 0px;
}

/* One switch for the entire file. Every duration below is one of these three,
   so honouring the preference is a variable change rather than a hunt. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-mid: 0s; --t-slow: 0s; }
}

/* Keyboard users get to skip the nav. It is a dozen tab stops otherwise. */
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--violet); color: #fff; font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip:focus { top: 0; }

/* ───────────────────────────────────────────────────────────────── the bar */
.nav {
  position: sticky; top: 0; z-index: 60;
  --nav-pad: 26px;
  display: flex; align-items: center; gap: 14px;
  padding: 11px var(--nav-pad);
  background: var(--panel);
  border-bottom: 1px solid var(--glass-edge);
  transition: padding var(--t-mid) var(--ease-out),
              background var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
/* Keep geometry stable across the observed scroll boundary. */
.nav.is-scrolled {
  background: var(--panel);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
}

/* A single soft light that follows the pointer across the bar. --px/--py are
   written by chrome.js; with no script they stay at their defaults and this is
   a static glow nobody would think to question. */
.nav-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 120px at var(--px, 50%) var(--py, 0%),
              rgba(155, 93, 229, .16), transparent 70%);
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
}
.nav:hover .nav-sheen { opacity: 1; }
.nav > *:not(.nav-sheen) { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────── the brand */
.brand { position: relative; display: inline-flex; align-items: center;
         gap: 10px; flex: none; }
.brand .mark { display: block; flex: none; position: relative; z-index: 1; }
.brand .wordmark { display: block; width: auto; opacity: .96; }

/* ─────────────────────────────────────────────────────── the sheen sweep
 *
 * Replaces the conic ring that used to orbit the symbol. The ring was the most
 * generic motion in software -- it is what every product spins while it thinks
 * -- and the mark already carries two motion ideas of its own in the speed
 * trails and the cyan swoosh. A third, unrelated one was noise.
 *
 * This is the same language the card tiles already speak. The site's most
 * distinctive effect is the holo sheen on a foil card; putting it on the brand
 * makes the mark and the product one idea rather than two.
 *
 * Clipped to the artwork's own alpha, which is the whole trick: the highlight
 * travels through the logo rather than across a rectangle containing it.
 */
/* Keyed off .mark, not .brand .mark, so any surface can draw the mark and get
   the sheen with it -- the coming-soon page was drawing a different, older file
   entirely because the treatment was locked to the nav. */
.mark {
  display: block; flex: none; position: relative;
  width: var(--mark-w, 43px); height: var(--mark-h, 30px);
  background: url("/static/brand/symbol-nav.png") center / contain no-repeat;
}
.mark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* A narrow band, angled -- a flat vertical wipe reads as a scanner. */
  background-image: linear-gradient(102deg,
      transparent 0%, rgba(255, 255, 255, .68) 50%, transparent 100%);
  background-size: 62% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  -webkit-mask: url("/static/brand/symbol-nav.png") center / contain no-repeat;
          mask: url("/static/brand/symbol-nav.png") center / contain no-repeat;
  /* ease-in-out on the position so the band accelerates into the mark and
     settles out of it, rather than tracking across at a constant rate. */
  animation: brand-sheen 6s cubic-bezier(.42,0,.58,1) infinite;
}

/* Six seconds, and the pass itself takes 38% of it. The rest is deliberate
   stillness: motion that never stops stops reading as motion.
 *
 * The opacity ramps are the fix for it looking choppy. Previously the band
 * simply existed at full strength the moment it crossed the logo's left edge,
 * and since the leading edge of the artwork is a thin faint motion trail, a
 * bright band arriving on it read as a pop rather than a sweep. Now it fades up
 * over the first sixth of its travel and back down over the last, so it enters
 * and leaves rather than appearing and vanishing. */
@keyframes brand-sheen {
  0%   { background-position: -85% 0; opacity: 0; }
  7%   { opacity: 1; }
  31%  { opacity: 1; }
  38%  { background-position: 185% 0; opacity: 0; }
  38.01%,
  100% { background-position: -85% 0; opacity: 0; }
}

/* Hovering runs it once, faster, from wherever it was. */
.brand:hover .mark::after { animation-duration: 2.4s; }
/* The coming-soon mark is drawn at 78px, where the nav's 129px source is
   short. Use the full-resolution artwork there. */
.soon-mark, .soon-mark::after {
  background-image: url("/static/brand/chaserr-symbol.png");
}
.soon-mark::after {
  -webkit-mask-image: url("/static/brand/chaserr-symbol.png");
          mask-image: url("/static/brand/chaserr-symbol.png");
}
.brand:hover .wordmark .wsheen { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mark::after { animation: none; opacity: 0; }
  /* SMIL ignores the media query, so the sheen rect is hidden instead. */
  .brand .wordmark .wsheen { display: none; }
}

/* Says the gate is on. Deliberately loud: this is a state you are meant to
   want to switch off, not a badge to get used to. */
.prelaunch {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .12em; padding: 2px 5px; border-radius: 4px;
  color: #0E0714; background: var(--live); align-self: flex-start;
  margin-left: -4px;
}

/* ──────────────────────────────────────────────────── primary (the world) */
.navprimary { position: relative; display: flex; align-items: center; gap: 4px;
              flex: none; }
.navlink, .menu > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  cursor: pointer; list-style: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.menu > summary::-webkit-details-marker { display: none; }
.navlink:hover, .menu > summary:hover,
.menu[open] > summary { color: var(--ink); background: rgba(255,255,255,.05); }
.navlink:focus-visible, .menu > summary:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 1px; }
.navlink[aria-current="page"], .menu > summary[aria-current="page"] {
  color: var(--ink);
}
.menu > summary[aria-current="page"] { background: rgba(255,255,255,.05); }

.chev { transition: rotate var(--t-mid) var(--ease-out); opacity: .7; }
.menu[open] > summary .chev { rotate: 180deg; }

/* The ink bar. One element that slides between items rather than a border that
   blinks on and off — the movement is what says the two are the same kind of
   thing. Zero-width until chrome.js measures a target, so with no script it is
   simply never seen. */
.nav-ink {
  position: absolute; bottom: -12px; left: 0; height: 2px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--live));
  box-shadow: 0 0 12px rgba(155, 93, 229, .7);
  opacity: 0; pointer-events: none;
  transition: transform var(--t-mid) var(--ease-spring),
              width var(--t-mid) var(--ease-spring),
              opacity var(--t-fast) linear;
}
.nav-ink.on { opacity: 1; }

/* Optional campaign art is a destination, never structural navigation. It is
   intentionally absent below a roomy desktop width so Search, Scan and the
   account controls never compress around it. */
.nav-editorial { display: none; }
@media (min-width: 1520px) {
  .nav-editorial {
    position: relative;
    display: flex;
    width: 168px;
    height: 42px;
    flex: none;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--sp-4);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background-image:
      linear-gradient(90deg, color-mix(in srgb, var(--ground) 80%, transparent), color-mix(in srgb, var(--ground) 22%, transparent)),
      var(--editorial-art);
    background-position: center, 72% center;
    background-size: cover;
    color: var(--ink);
    text-decoration: none;
    box-shadow: inset 0 1px 0 var(--line);
  }
  .nav-editorial::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 46%, color-mix(in srgb, var(--foil) 22%, transparent), transparent 58%);
    content: "";
    pointer-events: none;
  }
  .nav-editorial span,
  .nav-editorial strong { position: relative; z-index: 1; }
  .nav-editorial span {
    color: var(--violet-ink);
    font: 600 var(--fs-micro) var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .nav-editorial strong { margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1; }
  .nav-editorial:hover { border-color: var(--violet-ink); }
  .nav-editorial:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 2px; }
}

/* ─────────────────────────────────────────────────────────────── the panel */
.menu { position: relative; }
.panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 70;
  /* Opaque, not glass. The glass reads on the bar itself and on the scrim;
     here it only put the hero's six-figure numbers behind a list of category
     names. No backdrop-filter either — it costs a composite to blur something
     nobody can see. */
  background: linear-gradient(180deg, #1C0E27, #150920);
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 20px;
  transform-origin: top left;
  animation: panel-in var(--t-mid) var(--ease-spring) both;
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.browse .panel {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  left: var(--nav-pad); right: auto;
}
.browse-panel {
  display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 26px;
  width: min(760px, calc(100vw - var(--nav-pad) * 2));
}
.panel-h {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
}
.catlist { list-style: none; margin: 0; padding: 0; }
.catlist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 8px; margin: 0 -8px; border-radius: 7px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              translate var(--t-fast) var(--ease-out);
}
.catlist a:hover {
  background: var(--violet-dim); color: var(--ink); translate: 3px 0;
}
.catnum { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.catlist a:hover .catnum { color: var(--violet-lo); }
.panel-more {
  display: inline-block; margin-top: 10px; font-size: 12px;
  color: var(--violet-lo); text-decoration: none;
}
.panel-more:hover { color: var(--ink); }

.panel-aside { border-left: 1px solid var(--glass-edge); padding-left: 24px; }
.bigl {
  display: block; padding: 10px 12px; margin: 0 -12px 4px;
  border-radius: var(--r-sm); text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.bigl:hover { background: rgba(255,255,255,.045); }
.bigl strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.bigl span   { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
               line-height: 1.35; }

/* ────────────────────────────────────────────── yours (the right-hand axis) */
.navyou { display: flex; align-items: center; gap: 10px; flex: none;
          margin-left: auto; }
.you > summary { min-width: 44px; min-height: 44px; justify-content: center; }
.you-panel { left: auto; right: 0; transform-origin: top right;
             width: min(280px, calc(100vw - 24px)); min-width: 0;
             max-height: calc(100dvh - var(--nav-h) - 24px);
             overflow-y: auto; overscroll-behavior: contain;
             background: var(--panel); padding: var(--sp-3); }
.you-name {
  font-size: var(--fs-small); color: var(--ink-3); margin: 2px 8px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.you-panel a, .you-panel button {
  display: flex; align-items: center; width: 100%; min-height: 44px; text-align: left;
  padding: 8px 10px; border-radius: 8px; border: 0; background: none;
  font-family: var(--font); font-size: var(--fs-body); color: var(--ink-2);
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.you-panel a:hover, .you-panel button:hover {
  background: var(--violet-dim); color: var(--ink); }
.you-panel a:focus-visible, .you-panel button:focus-visible {
  outline: 2px solid var(--violet-ink); outline-offset: -2px; }
.you-panel .you-profile-entry {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px;
  min-height:64px; margin-bottom:5px; border:1px solid var(--line-strong);
  border-radius:3px 14px 3px 3px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 12%,var(--panel)),var(--panel));
  color:var(--ink); font-size:12px; font-weight:650;
}
.you-profile-entry::before { grid-column:1; grid-row:2; color:var(--ink-3); font-size:8px; font-weight:400; line-height:1.35; content:"Room, progress and collector identity"; }
.you-profile-entry::after { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--live); font:600 7px var(--mono); letter-spacing:.12em; text-transform:uppercase; content:"Enter"; }
.you-divider { height: 1px; margin: 6px 8px; background: var(--glass-edge); }
.you-panel form { margin-top: 6px; padding-top: 6px;
                  border-top: 1px solid var(--glass-edge); }

/* The compact product map lives at the bottom, where a thumb can reach it.
   It is rendered at every width so the links exist without JavaScript, then
   promoted only at the breakpoint where the desktop primary links retire. */
.mobile-primary { display: none; }

.avatar {
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--violet), #6D3BB0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* ──────────────────────────────────────────────────────── the command bar */
.searchbar {
  position: relative; flex: 1 1 260px; min-width: 150px; max-width: 560px;
  margin-inline: auto;
  transition: max-width var(--t-mid) var(--ease-out);
}
.searchbar input {
  /* The right side now holds two accessories: the camera, which stays, and the
     / hint, which retires once you are typing. */
  width: 100%; min-height: 44px; padding: 9px 86px 9px 36px;
  border-radius: var(--r-control);
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,.045);
  color: var(--ink); font-family: var(--font); font-size: var(--fs-body);
  transition: border-color var(--t-mid) var(--ease-out),
              background var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar input:focus {
  outline: none;
  border-color: rgba(155,93,229,.65);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(155,93,229,.13),
              0 12px 34px rgba(0,0,0,.4);
}
.s-icon {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  color: var(--ink-3); pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}
.searchbar:focus-within .s-icon { color: var(--violet-lo); }
/* The shortcut is advertised rather than buried in a help page — a key you have
   to be told about is a key nobody presses. It hides once you are typing,
   because by then it has done its job. */
.s-key {
  position: absolute; right: 50px; top: 50%; translate: 0 -50%;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  border: 1px solid var(--glass-edge); border-radius: 5px;
  padding: 1px 6px; pointer-events: none;
  transition: opacity var(--t-fast) linear;
}
.searchbar:focus-within .s-key { opacity: 0; }

/* The camera in the search bar. The shortcut into /scan, not a second scanner:
   every competitor puts one here and a collector arrives looking for it. It
   does NOT retire on focus the way the / hint does — the hint has done its job
   once you are typing, and this is still the thing you might want next. */
.s-scan {
  position: absolute; right: 2px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-control);
  color: var(--ink-3); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.s-scan:hover, .s-scan:focus-visible {
  color: var(--violet-lo);
  background: rgba(155,93,229,.14);
}

/* Widens when it becomes the thing you are doing. */
body.cmd-open .searchbar { max-width: 680px; }

.cmd-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(8, 4, 12, .58);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 0; transition: opacity var(--t-mid) var(--ease-out);
}
body.cmd-open .cmd-scrim { opacity: 1; }

.cmd-results {
  position: absolute; top: calc(100% + 9px); left: 0; right: 0; z-index: 70;
  max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(20, 9, 29, .97);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  box-shadow: 0 26px 70px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 8px;
  animation: panel-in var(--t-mid) var(--ease-spring) both;
}
.cmd-group {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding: 9px 10px 5px;
}
.cmd-row {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: 9px; text-decoration: none;
  color: var(--ink-2); cursor: pointer;
}
/* Hover and keyboard selection are one state on purpose: two highlights on one
   list is how you lose track of which row Enter takes. */
.cmd-row:hover, .cmd-row.sel { background: var(--violet-dim); color: var(--ink); }
.cmd-row.sel { box-shadow: inset 2px 0 0 var(--violet); }
.cmd-thumb {
  width: 30px; height: 42px; flex: none; border-radius: 4px;
  object-fit: cover; background: var(--ground-2);
  border: 1px solid rgba(255,255,255,.07);
}
.cmd-thumb.ph { display: grid; place-items: center; font-size: 14px;
                color: var(--ink-3); }
.cmd-avatar {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.35));
}
.cmd-person:hover .cmd-avatar,
.cmd-person.sel .cmd-avatar {
  filter: drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 42%,transparent));
}
.cmd-main { min-width: 0; flex: 1; }
.cmd-name { font-size: 13px; color: var(--ink); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.cmd-sub  { font-size: 11px; color: var(--ink-3); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cmd-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); flex: none;
}
.cmd-empty, .cmd-loading {
  padding: 18px 12px; font-size: 12.5px; color: var(--ink-3); text-align: center;
}
.cmd-all {
  display: block; margin-top: 6px; padding: 9px 10px;
  border-top: 1px solid var(--glass-edge);
  font-size: 12px; color: var(--violet-lo); text-decoration: none;
}
.cmd-all:hover { color: var(--ink); }

/* ─────────────────────────────────────────────────────────── page arrival */
/* The content rises as the page settles. Runs once, costs one composite, and is
   the difference between a page that appeared and a page that loaded. */
/* Don't animate a surface as tall as the entire editor/profile. */
main.wrap > *:not(.footer) { animation: none; }
@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════ cards that behave like cards
 *
 * app.css already grades a card by what it *is* — the nine-step ladder from
 * one-of-one down to base, with the rule that the rarer a card is the quieter
 * and slower its treatment. What it could not do is the thing that makes a
 * holo a holo: a real one only shows its rainbow when you *move* it, and where
 * the band sits depends on where you are holding it.
 *
 * So the sweep stops being a canned animation and becomes a function of the
 * pointer. Tilt the card and the light moves across it. That is not decoration
 * — it is the single most recognisable physical property of the object this
 * whole site is a catalogue of, and a base common still does nothing, which is
 * what keeps it information rather than noise.
 *
 * Keyboard users keep the canned sweep, because there is no pointer to follow
 * and a treatment you can only get with a mouse is a treatment half the people
 * never see.
 */
.card-tile { perspective: 780px; }

/* Only while a pointer is actually on the card. Outside that the rules in
   app.css are untouched, so a page with this file missing looks exactly as it
   did — and `will-change` is not left on 120 tiles, which would hand every one
   of them its own compositor layer. */
.card-tile.tilting .frame {
  transform: translateY(-5px) scale(1.015)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .09s linear, box-shadow .22s ease;
  will-change: transform;
}
.card-tile.tilting .frame::after {
  animation: none;
  transition: none;
  background-position: var(--sx, 50%) var(--sy, 50%);
}
/* The glare is a second, softer light source that sits under the tint band and
   follows the pointer directly — the diffuse highlight on a sleeve, where the
   sheen above it is the holo layer underneath. Drawn on the image wrapper so it
   is clipped by the card's own corners. */
.card-tile.tilting .frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: inherit;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 255, 255, .13), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  .card-tile.tilting .frame {
    transform: translateY(-5px) scale(1.015);
    will-change: auto;
  }
  .card-tile.tilting .frame::before { display: none; }
}

/* ───────────────────────────────────────────────────────────── responsive */
/* Below 1000px the panel is what survives, not the flat links — a menu holding
   sixty-eight categories degrades better than two words that happen to fit. */
@media (max-width: 1000px) {
  :root { --mobile-dock-clearance: calc(82px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--mobile-dock-clearance) + var(--s-4)); }
  body:not(.capturepage):not(.binder-reader-view) :where(a[href], button, input, select, textarea, summary, [tabindex]):not([tabindex="-1"]) {
    scroll-margin-block-end: calc(var(--mobile-dock-clearance) + var(--s-3));
  }
  .navprimary .navlink { display: none; }
  .nav { gap: 10px; --nav-pad: 16px; }
  .navyou { display: none; }
  .navyou-signed-in { display: flex; }
  .you .panel {
    position: fixed; top: calc(var(--nav-h) + 8px); right: 12px; left: auto;
    max-height: calc(100dvh - var(--nav-h) - var(--mobile-dock-clearance) - 18px);
  }
  .browse .panel {
    inset-inline: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - var(--nav-h) - var(--mobile-dock-clearance) - 18px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > .wrap {
    padding-bottom: calc(var(--s-9) + var(--mobile-dock-clearance));
  }
  .mobile-primary {
    position: fixed;
    z-index: 58;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    min-height: 70px;
    padding: 6px;
    border: 1px solid var(--glass-edge);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .58),
                inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .mobile-primary > a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 14px;
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .01em;
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
  }
  .mobile-primary > a:hover,
  .mobile-primary > a[aria-current="page"] {
    color: var(--ink);
    background: rgba(255, 255, 255, .055);
  }
  .mobile-primary > a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 28%;
    bottom: 3px;
    left: 28%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--violet), var(--live));
    box-shadow: 0 0 9px rgba(155, 93, 229, .65);
  }
  .mobile-primary > a:focus-visible {
    outline: 2px solid var(--live);
    outline-offset: 1px;
  }
  .mobile-primary svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-primary-scan { color: var(--violet-lo) !important; }
  .mobile-primary-collection span { letter-spacing: -.05em; }
  .mobile-primary-scan-icon {
    display: grid;
    width: 32px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(155, 93, 229, .5);
    border-radius: 11px;
    background: var(--violet-dim);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .capturepage .mobile-primary,
  .binder-reader-view .mobile-primary { display: none; }
  .capturepage > .wrap,
  .binder-reader-view > .wrap { padding-bottom: 0; }
}
/* A short landscape phone still needs all five destinations, but the portrait
   dock consumes too much of its limited height. Keep labels and 44px targets. */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  :root { --mobile-dock-clearance: calc(62px + env(safe-area-inset-bottom)); }
  .mobile-primary { min-height: 56px; padding: 3px; border-radius: 16px; }
  .mobile-primary > a { min-height: 48px; gap: 1px; border-radius: 12px; }
  .mobile-primary svg { width: 18px; height: 18px; }
  .mobile-primary-scan-icon { width: 28px; height: 24px; }
}
@media (max-width: 720px) {
  :root { --nav-h: 67px; }
  .nav { flex-wrap: nowrap; gap: 8px; --nav-pad: 12px; }
  .navprimary { display: none; } /* Categories remain in the Search destination. */
  .navyou-signed-in { margin-left: 0; }
  .nav .searchbar { flex: 1 1 0; min-width: 0; max-width: none; margin-inline: 0; }
  .nav .searchbar input { padding-right: 12px; }
  .nav .s-key, .nav .s-scan { display: none; } /* Scan stays one tap away in the dock. */
  .you > summary { padding-inline: 8px; }
  .brand .wordmark { display: none; }
  .browse-panel { grid-template-columns: 1fr 1fr; }
  .panel-aside { display: none; }
}
@media (max-width: 520px) {
  .browse-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .cmd-results, main.wrap > *:not(.footer) { animation: none; }
  .catlist a:hover { translate: none; }
}

/* ═════════════════════════════════════════════ profiles: drawn, not uploaded
 *
 * The third time this project has reached for the same pattern, after the slab
 * labels and the binder covers: a visual object is a **row in a table** — two
 * colours, a shape, a texture — and the stylesheet draws it. Any size, always
 * crisp, nothing stored, and "unlock more" is unlocking rows.
 *
 * Here it is also a safety decision. Uploads from the public mean storage,
 * resizing, EXIF stripping, malware scanning, a takedown process and a legal
 * obligation around illegal imagery. One person cannot run that alongside a
 * beta, and a beta does not need it: --seed rotates the hue, so ten rows give
 * thousands of avatars that are recognisably somebody's own.
 */
.avatar-obj {
  position: relative; display: inline-block;
  width: 40px; aspect-ratio: 1; flex: none;
  background: linear-gradient(145deg, var(--base), var(--accent));
  /* Keep the chosen colour when a larger surface adds a shadow. */
  filter: hue-rotate(var(--seed, 0deg)) var(--avatar-shadow, drop-shadow(0 0 0 transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
              inset 0 -8px 18px rgba(0,0,0,.28);
}
.avatar-obj.lg { width: 84px; }
.avatar-obj.sh-orb     { border-radius: 50%; }
.avatar-obj.sh-hex     { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.avatar-obj.sh-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.avatar-obj.tx-grain::after,
.avatar-obj.tx-prism::after,
.avatar-obj.tx-leaf::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  clip-path: inherit;
}
/* A woven, matte surface. */
.avatar-obj.tx-grain::after {
  background: repeating-linear-gradient(48deg,
    rgba(255,255,255,.10) 0 2px, transparent 2px 5px);
}
/* The foil treatment, borrowed from the tier ladder so a prismatic avatar and
   a rainbow card read as the same idea. */
.avatar-obj.tx-prism::after {
  background: conic-gradient(from 200deg,
    rgba(94,231,247,.5), rgba(155,93,229,.5), rgba(246,224,94,.5),
    rgba(74,222,128,.45), rgba(94,231,247,.5));
  mix-blend-mode: screen; opacity: .6;
}
.avatar-obj.tx-leaf::after {
  background: linear-gradient(115deg, transparent 30%,
    rgba(255,255,255,.42) 47%, transparent 62%);
}
.avatar-obj.tx-smooth::after { content: none; }

/* ------------------------------------------------------------- the banner */
.banner-obj {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--base),
              color-mix(in srgb, var(--accent) 40%, var(--base)));
}
.banner-obj::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.banner-obj.pt-aurora::before {
  background:
    radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(50% 100% at 85% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
}
.banner-obj.pt-stripes::before {
  background: repeating-linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0 12px, transparent 12px 34px);
}
.banner-obj.pt-grain::before {
  background: repeating-linear-gradient(43deg,
    rgba(255,255,255,.06) 0 3px, transparent 3px 7px);
}
.banner-obj.pt-grid::before {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 26px);
}
.banner-obj.pt-prism::before {
  background: conic-gradient(from 210deg at 30% 50%,
    rgba(94,231,247,.30), rgba(155,93,229,.30), rgba(246,224,94,.28),
    rgba(74,222,128,.26), rgba(94,231,247,.30));
}

.banner {
  border-radius: var(--r-lg); min-height: 148px;
  display: flex; align-items: flex-end;
  border: 1px solid var(--glass-edge);
  margin-bottom: 20px;
}
.banner-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 22px;
  background: linear-gradient(0deg, rgba(14,7,20,.82), transparent);
  border-radius: inherit;
}
.banner-who { flex: 1; min-width: 0; }
.banner-who h1 { margin: 0; font-size: 25px; }
.bio { color: var(--ink-2); max-width: 62ch; margin: 0 0 22px; }

.stat-row {
  display: grid; gap: 12px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.stat-row .stat {
  background: var(--ground-1); border: 1px solid var(--glass-edge);
  border-radius: var(--r-md); padding: 14px 16px;
}
.stat-row .n { font-family: var(--mono); font-size: 21px; color: var(--violet-lo); }
.stat-row .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
               color: var(--ink-3); margin-top: 3px; }

/* ─────────────────────────────────────────────────────── people directory
   A public signal map, not a leaderboard. Discovery keys off collector words
   and identity; portfolio value and collection size never enter this surface. */
.people-view .wrap { width: min(1280px,calc(100% - 40px)); }
.people-page { --people-cyan: #6fe9f7; --people-line: rgba(244,239,250,.105); position: relative; }
.people-page::before {
  content: ""; position: absolute; z-index: -1; inset: 210px -12vw auto; height: 650px;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.014) 48px 49px),
    linear-gradient(90deg,transparent 9.9%,rgba(111,233,247,.04) 10%,transparent 10.1% 89.9%,rgba(195,152,240,.04) 90%,transparent 90.1%);
  mask-image: linear-gradient(transparent,#000 17%,#000 83%,transparent); pointer-events: none;
}
.people-hero {
  position: relative; overflow: hidden; min-height: 285px; display: grid;
  grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 30px;
  padding: 46px 58px; border: 1px solid var(--people-line); border-radius: 3px 24px 3px 3px;
  background:
    linear-gradient(115deg,rgba(31,17,45,.97),rgba(15,9,23,.9) 56%,rgba(12,8,18,.73)),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.02) 80px 81px);
  box-shadow: 0 32px 90px rgba(0,0,0,.32);
}
.people-hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -125px; top: -200px;
  border: 1px solid rgba(111,233,247,.12); border-radius: 50%;
  background: repeating-radial-gradient(circle,transparent 0 42px,rgba(111,233,247,.06) 43px 44px);
}
.people-hero::after { content: "SEARCH / OPEN / VISIT"; position: absolute; left: 58px; bottom: 25px; color: rgba(244,239,250,.24); font: 600 7px var(--mono); letter-spacing: .2em; }
.people-register { position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; border-left: 1px solid var(--people-cyan); border-top: 1px solid var(--people-cyan); opacity: .7; }
.people-hero > div:first-of-type { position: relative; z-index: 2; }
.people-hero h1 { max-width: 700px; margin: 4px 0 13px; font-size: clamp(42px,7vw,76px); line-height: .92; letter-spacing: -.055em; }
.people-hero p { max-width: 650px; margin: 0; color: rgba(244,239,250,.63); font-size: 14px; line-height: 1.55; }
.people-radar { position: relative; z-index: 2; width: 220px; height: 220px; justify-self: end; border: 1px solid rgba(111,233,247,.16); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 34px,rgba(111,233,247,.09) 35px 36px); }
.people-radar::before,.people-radar::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(111,233,247,.18); }
.people-radar::before { width: 1px; height: 100%; transform: translateY(-50%); }.people-radar::after { width: 100%; height: 1px; transform: translateX(-50%); }
.people-radar > i { position: absolute; width: 7px; height: 7px; border: 1px solid var(--people-cyan); transform: rotate(45deg); box-shadow: 0 0 14px rgba(111,233,247,.45); }
.people-radar > i:nth-child(1) { left: 28%; top: 29%; }.people-radar > i:nth-child(2) { right: 23%; top: 42%; }.people-radar > i:nth-child(3) { left: 41%; bottom: 19%; opacity: .46; }
.people-radar b { position: absolute; left: calc(50% - 18px); top: calc(50% - 18px); display: grid; place-items: center; width: 36px; height: 36px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--people-cyan); color: #09050e; font: 700 7px var(--mono); }
.people-search {
  position: relative; z-index: 3; display: grid; grid-template-columns: 23px minmax(0,1fr) auto auto; align-items: center; gap: 10px;
  width: calc(100% - 80px); margin: -24px auto 34px; padding: 8px 8px 8px 17px;
  border: 1px solid rgba(111,233,247,.24); border-radius: 4px; background: rgba(12,7,18,.94);
  box-shadow: 0 18px 45px rgba(0,0,0,.34),0 0 28px rgba(111,233,247,.035);
}
.people-search svg { width: 17px; fill: none; stroke: rgba(111,233,247,.63); stroke-width: 1.4; }
.people-search input { min-width: 0; padding: 12px 5px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 12px var(--font); }
.people-search input::placeholder { color: rgba(244,239,250,.34); }
.people-search a { padding: 8px; color: var(--ink-3); font-size: 10px; text-decoration: none; }
.people-search button { align-self: stretch; padding: 0 18px; border: 1px solid rgba(111,233,247,.24); border-radius: 2px; background: rgba(111,233,247,.08); color: var(--people-cyan); font: 600 8px var(--mono); letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }
.people-search button:hover { background: rgba(111,233,247,.14); border-color: rgba(111,233,247,.48); }
.people-result-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 18px; padding: 0 2px 14px; border-bottom: 1px solid var(--people-line); }
.people-result-head h2 { margin: 3px 0 0; font-size: 22px; }.people-result-head > span { color: rgba(111,233,247,.54); font: 600 7px var(--mono); letter-spacing: .14em; }
.people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.person-signal {
  position: relative; overflow: hidden; min-height: 365px; display: flex; flex-direction: column;
  border: 1px solid var(--people-line); border-radius: 3px; background: rgba(17,10,25,.74);
  color: inherit; text-decoration: none; box-shadow: 0 20px 48px rgba(0,0,0,.17);
  transition: transform 260ms var(--ease-out),border-color 260ms var(--ease-out),box-shadow 260ms var(--ease-out);
}
.person-signal::after { content: ""; position: absolute; right: -1px; top: -1px; width: 38px; height: 38px; border-right: 1px solid var(--people-cyan); border-top: 1px solid var(--people-cyan); opacity: .36; }
.person-signal:hover { transform: translateY(-4px); border-color: rgba(111,233,247,.28); box-shadow: 0 28px 60px rgba(0,0,0,.28),0 0 30px rgba(111,233,247,.035); }
.person-signal-code { position: absolute; z-index: 3; left: 14px; top: 12px; color: rgba(244,239,250,.48); font: 600 6.5px var(--mono); letter-spacing: .16em; }
.person-banner { display: block; width: 100%; height: 110px; border-radius: 0; opacity: .82; }
.person-avatar { position: relative; z-index: 2; flex: none; width: 70px; margin: -34px 0 0 20px; outline: 5px solid #140c1c; --avatar-shadow: drop-shadow(0 10px 19px rgba(0,0,0,.43)); }
.person-copy { display: block; padding: 13px 20px 4px; }
.person-copy strong,.person-copy small { display: block; }.person-copy strong { color: var(--ink); font-size: 17px; }.person-copy small { margin-top: 4px; color: rgba(111,233,247,.56); font: 7.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.person-copy p { display: -webkit-box; min-height: 38px; overflow: hidden; margin: 12px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.person-frequencies { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 20px 18px; }
.person-frequencies i { max-width: 100%; overflow: hidden; padding: 5px 7px; border-left: 2px solid color-mix(in srgb,var(--person-accent) 70%,var(--people-cyan)); background: rgba(255,255,255,.025); color: rgba(244,239,250,.62); font: normal 7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.person-frequencies.quiet i { border-left-color: rgba(244,239,250,.18); color: rgba(244,239,250,.3); }
.person-open { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 13px 20px; border-top: 1px solid var(--people-line); color: rgba(111,233,247,.58); font: 600 7px var(--mono); letter-spacing: .13em; }
.person-open i { font-style: normal; font-size: 10px; }.person-signal:hover .person-open { color: var(--people-cyan); }
.people-empty { min-height: 330px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--people-line); color: var(--ink-3); }
.people-empty-radar { position: relative; width: 86px; height: 86px; margin-bottom: 20px; border: 1px solid rgba(111,233,247,.14); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 16px,rgba(111,233,247,.08) 17px 18px); }
.people-empty-radar i { position: absolute; left: 50%; bottom: 50%; width: 42px; height: 1px; transform: rotate(-30deg); transform-origin: left; background: linear-gradient(90deg,var(--people-cyan),transparent); opacity: .5; }
.people-empty strong { color: var(--ink-2); font-size: 14px; }.people-empty p { margin: 7px 0 18px; font-size: 11px; }

@media (max-width: 900px) {
  .people-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .people-hero { grid-template-columns: 1fr 170px; padding-inline: 34px; }
  .people-radar { width: 160px; height: 160px; }
  .people-hero::after { left: 34px; }
}
@media (max-width: 640px) {
  .people-view .wrap { width: min(100% - 24px,1280px); }
  .people-hero { min-height: 320px; grid-template-columns: 1fr; padding: 44px 23px 65px; }
  .people-hero h1 { font-size: 48px; }.people-hero p { font-size: 12px; }
  .people-radar { position: absolute; right: -45px; bottom: -72px; width: 190px; height: 190px; opacity: .45; }
  .people-hero::after { left: 23px; bottom: 23px; }
  .people-search { width: calc(100% - 22px); grid-template-columns: 19px minmax(0,1fr) auto; margin-bottom: 27px; }
  .people-search a { display: none; }.people-search button { padding-inline: 11px; font-size: 6.5px; }
  .people-result-head { align-items: flex-start; }.people-result-head h2 { font-size: 17px; }
  .people-grid { grid-template-columns: 1fr; }
  .person-signal { min-height: 340px; }
}

/* Collector search v2. The old signal-card rules above are retained for the
   moment so cached previews do not flash unstyled; production markup uses this
   quieter shared row language in both the directory and Your circle. */
.people-page { max-width: 980px; margin-inline: auto; }
.people-page::before { display: none; }
.people-hero { min-height: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 34px 2px 30px; border: 0; border-bottom: 1px solid var(--people-line); border-radius: 0; background: transparent; box-shadow: none; }
.people-hero::before,.people-hero::after { display: none; }
.people-hero h1 { margin: 8px 0 9px; font-size: clamp(38px,6vw,62px); }
.people-hero p { max-width: 590px; }
.people-hero .social-secondary { flex: none; }
.people-search { width: 100%; margin: 24px 0 38px; border-radius: 13px; box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.people-search button { border-radius: 9px; font-size: 9px; }
.people-result-head { margin-bottom: 0; padding-bottom: 17px; }
.people-result-head > span { font-size: 8px; text-transform: uppercase; }
.people-rows { margin: 0; padding: 0; list-style: none; }
.people-rows > li { border-bottom: 1px solid var(--people-line); }
.person-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto 22px; align-items: center; gap: 16px; min-height: 91px; padding: 16px 4px; color: inherit; text-decoration: none; transition: padding 140ms ease,background-color 140ms ease; }
.person-row:hover { padding-inline: 12px; background: rgba(111,233,247,.035); }
.person-row-avatar { width: 50px; flex: none; }
.person-row-copy { min-width: 0; }.person-row-copy strong,.person-row-copy small,.person-row-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row-copy strong { font-size: 15px; }.person-row-copy small { margin-top: 4px; color: #a48bb9; font: 9px var(--mono); }.person-row-copy small i { margin-inline: 6px; color: #6fe9f7; font-style: normal; }
.person-row-copy > span { margin-top: 7px; color: #b7a9c2; font-size: 11px; }
.person-row-state { padding: 6px 8px; border-radius: 999px; background: rgba(255,255,255,.035); color: #a99bb5; font: 600 9px var(--mono); white-space: nowrap; }
.person-row-state.is-accepted,.person-row-state.is-incoming { background: rgba(111,233,247,.08); color: #8cecf7; }
.person-row-state.is-self { color: #c398f0; }.person-row-open { color: #6fe9f7; }
.people-empty { min-height: 260px; border: 0; border-bottom: 1px solid var(--people-line); }
.people-empty.is-compact { min-height: 145px; padding: 22px 8px; border-bottom: 0; }
.people-empty-mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 50%; background: rgba(111,233,247,.07); color: #6fe9f7; }
.people-empty p { max-width: 48ch; margin: 9px 0 18px; line-height: 1.55; }
.social-people-results .people-rows > li { border-color: rgba(255,255,255,.075); }
.social-people-results .person-row { grid-template-columns: 40px minmax(0,1fr) auto 16px; gap: 11px; min-height: 69px; padding: 11px 2px; }
.social-people-results .person-row:hover { padding-inline: 6px; }
.social-people-results .person-row-avatar { width: 38px; }
.social-people-results .person-row-copy strong { font-size: 12px; }
.social-people-results .person-row-copy small { font-size: 8px; }
.social-people-results .person-row-copy > span { margin-top: 4px; font-size: 10px; }
.social-people-results .person-row-state { padding: 5px 6px; font-size: 7.5px; }
@media (max-width: 640px) {
  .people-hero { align-items: flex-start; flex-direction: column; padding-top: 25px; }
  .people-hero h1 { font-size: 40px; }.people-hero .social-secondary { width: 100%; }
  .people-search { width: 100%; margin: 18px 0 30px; }
  .person-row { grid-template-columns: 46px minmax(0,1fr) 18px; gap: 12px; }
  .person-row-avatar { width: 44px; }.person-row-state { grid-column: 2; justify-self: start; margin-top: -7px; }
  .person-row-open { grid-column: 3; grid-row: 1 / span 2; }
  .social-people-results .person-row { grid-template-columns: 38px minmax(0,1fr) 14px; }
  .social-people-results .person-row-state { grid-column: 2; }
  .social-people-results .person-row-open { grid-column: 3; }
}

/* ───────────────────────────────────────────────────── collector profile
   The profile is the room every future social object returns to. This first
   shell uses only the privacy-filtered data the route already supplies; empty
   trophy/activity modules are honest destination states, not invented data. */
.profile-view .wrap { width: min(1280px, calc(100% - 40px)); }
.profile-page { --profile-edge: rgba(244,239,250,.105); }
.profile-hero {
  position: relative; overflow: hidden; min-height: 330px;
  border: 1px solid var(--profile-edge); border-radius: 22px;
  box-shadow: 0 30px 85px rgba(0,0,0,.30);
  display: flex; flex-direction: column; justify-content: space-between;
  margin-bottom: 0;
}
.profile-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,7,20,.84) 0%, rgba(14,7,20,.42) 46%, transparent 74%),
    linear-gradient(0deg, rgba(14,7,20,.90), transparent 58%);
}
.profile-hero::before {
  content: ""; position: absolute; z-index: 1; width: 54%; aspect-ratio: 1;
  right: -13%; top: -70%; pointer-events: none; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: repeating-radial-gradient(circle,transparent 0 28px,rgba(255,255,255,.045) 29px 30px);
  opacity: .68; transform: translate3d(var(--hero-x,0),var(--hero-y,0),0) rotate(-11deg);
  transition: transform 700ms var(--ease-out);
}
.profile-hero-top,.profile-hero-body,.profile-hero-foot {
  position: relative; z-index: 2;
}
.profile-hero-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px;
}
.profile-context,.profile-visibility,.profile-label,.profile-module-state {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .11em;
}
.profile-context { color: rgba(244,239,250,.76); font-size: 11px; }
.profile-context i {
  display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--live); box-shadow: 0 0 12px var(--live);
}
.profile-visibility {
  color: rgba(244,239,250,.58); font-size: 8.5px; padding: 5px 8px;
  border: 1px solid rgba(244,239,250,.14); border-radius: 999px;
  background: rgba(14,7,20,.28);
}
.profile-hero-body {
  display: grid; grid-template-columns: 106px minmax(0,1fr) auto;
  gap: 22px; align-items: center; padding: 34px 28px 28px;
}
.profile-avatar {
  width: 106px; --avatar-shadow: drop-shadow(0 14px 25px rgba(0,0,0,.42));
  outline: 1px solid rgba(244,239,250,.26); outline-offset: 6px;
}
.profile-eyebrow { margin: 0 0 6px; color: var(--violet-lo); font-size: 12px; font-weight: 600; }
.profile-identity h1 { margin: 0; font-size: clamp(34px,5vw,57px); line-height: .95; letter-spacing: -.045em; }
.profile-handle { margin: 11px 0 0; color: rgba(244,239,250,.68); font-size: 13px; }
.profile-actions { align-self: end; }
.profile-actions .btn-secondary { color: var(--ink); background: #140b1e; }
.profile-hero-foot {
  display: flex; align-items: end; justify-content: space-between; gap: 26px;
  padding: 21px 28px; border-top: 1px solid rgba(244,239,250,.08);
  background: rgba(14,7,20,.9);
}
.profile-bio { max-width: 66ch; margin: 0; color: rgba(244,239,250,.78); font-size: 14px; }
.profile-since { flex: none; color: rgba(244,239,250,.62); font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.profile-subnav {
  display: flex; align-items: center; gap: 4px; overflow-x: auto;
  margin: 13px 0 26px; padding: 4px; border: 1px solid var(--profile-edge);
  border-radius: 11px; background: rgba(255,255,255,.018);
}
.profile-subnav a {
  flex: none; color: var(--ink-3); text-decoration: none; font-size: 12px;
  padding: 8px 11px; border-radius: 7px;
}
.profile-subnav a:hover { color: var(--ink); background: rgba(155,93,229,.10); }
.profile-subnav span { margin-left: 4px; color: var(--violet-lo); font-family: var(--mono); font-size: 9px; }
.profile-private-note { margin-bottom: 20px; }
.profile-layout { display: grid; grid-template-columns: minmax(0,1fr) 298px; gap: 20px; align-items: start; }
.profile-main-column,.profile-rail { display: flex; flex-direction: column; }
.profile-main-column { gap: 0; counter-reset: profile-module; }
.profile-rail { gap: 14px; }
.profile-module { scroll-margin-top: 92px; }
.profile-main-column > .profile-module {
  position: relative; counter-increment: profile-module; padding: 29px 0 34px;
  border: 0; border-top: 1px solid var(--profile-edge); border-radius: 0;
  background: transparent;
}
.profile-main-column > .profile-module::before {
  content: "0" counter(profile-module); position: absolute; top: 34px; left: 0;
  color: rgba(195,152,240,.46); font: 600 8px var(--mono); letter-spacing: .08em;
}
.profile-main-column > .profile-module:first-child { border-top: 0; padding-top: 12px; }
.profile-main-column > .profile-module:first-child::before { top: 17px; }
.profile-rail-card {
  border: 1px solid var(--profile-edge); border-radius: 13px;
  background: rgba(255,255,255,.018);
}
.profile-module-head {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; padding-left: 34px;
}
.profile-label { display: block; color: var(--violet-lo); font-size: 10.5px; margin-bottom: 5px; }
.profile-module h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.profile-module-state { color: var(--ink-3); font-size: 10px; }
.profile-module-copy { max-width: 67ch; margin: -7px 0 20px; color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.profile-stats {
  grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; gap: 0;
  border-top: 1px solid rgba(244,239,250,.055); border-bottom: 1px solid rgba(244,239,250,.055);
}
.profile-stats .stat {
  min-width: 0; padding: 18px 15px; border: 0; border-left: 1px solid rgba(244,239,250,.055);
  border-radius: 0; background: transparent;
}
.profile-stats .stat:first-child { border-left: 0; padding-left: 0; }
.profile-stats .n { overflow: hidden; text-overflow: ellipsis; font-size: clamp(17px,2.1vw,23px); }
.profile-stats .sensitive { background: linear-gradient(90deg,transparent,rgba(240,199,110,.035)); }
.profile-stats .sensitive .n { color: #e7ca84; }
.profile-shelf { grid-template-columns: repeat(auto-fill,minmax(132px,1fr)); }
.profile-shelf .shelf-item { position: relative; }
.featured-binder-label {
  position: absolute; z-index: 2; top: -8px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 7px; border: 1px solid rgba(94,231,247,.28);
  border-radius: 999px; background: #16101f; color: var(--live);
  font: 600 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.featured-binder .binder-obj { box-shadow: 0 0 0 1px rgba(94,231,247,.15),0 18px 34px rgba(0,0,0,.30); }
.profile-interest-list { display: flex; flex-wrap: wrap; gap: 9px; }
.profile-interest {
  position: relative; min-width: 154px; overflow: hidden;
  padding: 11px 17px 12px 15px; border: 0; border-bottom: 1px solid var(--profile-edge);
  border-radius: 0; background: transparent;
}
.profile-interest::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--violet-lo);
}
.profile-interest:nth-child(3n+2)::before { background: var(--live); }
.profile-interest:nth-child(3n)::before { background: #e7ca84; }
.profile-interest span,.profile-interest strong { display: block; }
.profile-interest span {
  margin-bottom: 4px; color: var(--ink-3); font: 500 7.5px var(--mono);
  letter-spacing: .11em; text-transform: uppercase;
}
.profile-interest strong { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.profile-featured-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; }
.profile-main-column > .profile-card-showcase {
  overflow: hidden; margin: 10px 0 24px; padding: 25px 23px 27px;
  border: 1px solid rgba(195,152,240,.19); border-radius: 17px;
  background:
    radial-gradient(circle at 50% 115%,rgba(155,93,229,.12),transparent 49%),
    repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(244,239,250,.018) calc(16.666% - 1px) 16.666%),
    rgba(255,255,255,.014);
  box-shadow: 0 22px 54px rgba(0,0,0,.16);
}
.profile-main-column > .profile-card-showcase::before { top: 30px; left: 23px; color: var(--live); }
.profile-card-showcase .profile-module-head { padding-left: 34px; }
.profile-featured-card { min-width: 0; color: inherit; text-decoration: none; }
.profile-featured-art {
  position: relative; display: block; overflow: hidden; aspect-ratio: 2.5 / 3.5;
  border: 1px solid rgba(244,239,250,.14); border-radius: 8px;
  background: linear-gradient(145deg,rgba(155,93,229,.12),rgba(14,7,20,.8));
  box-shadow: 0 13px 25px rgba(0,0,0,.23);
  transition: transform var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
.profile-featured-card:nth-child(2n) .profile-featured-art { transform: translateY(5px); }
.profile-featured-card:hover .profile-featured-art { transform: translateY(-4px); border-color: rgba(195,152,240,.48); }
.profile-featured-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-featured-art i {
  position: absolute; left: 7px; bottom: 7px; padding: 3px 5px;
  border-radius: 5px; background: rgba(8,5,13,.78); color: rgba(244,239,250,.78);
  font: normal 7.5px var(--mono);
}
.profile-featured-copy { display: block; padding: 9px 2px 0; }
.profile-featured-copy strong,.profile-featured-copy small,.profile-featured-copy em,.profile-featured-copy q { display: block; overflow: hidden; text-overflow: ellipsis; }
.profile-exhibit-code { display: block; margin-bottom: 5px; color: rgba(111,233,247,.58); font: 600 6.5px var(--mono); letter-spacing: .14em; }
.profile-featured-copy strong { color: var(--ink-2); font-size: 10.5px; white-space: nowrap; }
.profile-featured-copy small { margin-top: 3px; color: var(--ink-3); font-size: 8.5px; line-height: 1.35; }
.profile-featured-copy em { margin-top: 5px; color: var(--violet-lo); font: normal 7.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.profile-featured-copy q {
  display: -webkit-box; min-height: 30px; margin-top: 8px; padding: 7px 7px 6px;
  overflow: hidden; border-left: 1px solid rgba(111,233,247,.32);
  background: linear-gradient(90deg,rgba(111,233,247,.045),transparent);
  color: rgba(244,239,250,.62); font: 8px/1.45 var(--font); quotes: none;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.showcase-no-art { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 40% 28%,rgba(94,231,247,.16),transparent 32%),linear-gradient(145deg,rgba(155,93,229,.2),rgba(14,7,20,.86)); }
.profile-module-empty { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--ink-3); text-align: left; }
.profile-module-empty.compact { min-height: 100px; justify-content: flex-start; }
.profile-module-empty.below { min-height: 0; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--profile-edge); }
.profile-module-empty strong { display: block; color: var(--ink-2); font-size: 13px; }
.profile-module-empty p { max-width: 58ch; margin: 4px 0; color: var(--ink-3); font-size: 11.5px; }
.empty-mark { flex: none; width: 34px; height: 44px; border: 1px solid rgba(195,152,240,.45); border-radius: 5px; transform: skewY(-4deg); box-shadow: 7px 5px 0 -3px rgba(155,93,229,.18); }
.trophy-preview { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.profile-main-column > #trophy-case {
  margin-top: 7px; padding: 25px 23px 27px; border: 1px solid var(--profile-edge);
  border-radius: 17px; background: radial-gradient(circle at 50% 52%,rgba(155,93,229,.055),transparent 58%);
}
.profile-main-column > #trophy-case::before { top: 30px; left: 23px; color: var(--gold,#e7ca84); }
#trophy-case .profile-module-head { padding-left: 34px; }
.trophy-slot {
  min-height: 150px; display: grid; place-items: center; align-content: center; gap: 14px;
  border: 1px solid var(--profile-edge); border-radius: 12px;
  background: rgba(14,7,20,.34); color: var(--ink-3);
}
.trophy-slot.featured { background: radial-gradient(circle at 50% 40%,rgba(155,93,229,.10),rgba(14,7,20,.38) 66%); }
.trophy-slot strong { font: 500 8.5px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.trophy-socket { width: 70px; height: 70px; border: 1px dashed rgba(195,152,240,.38); border-radius: 22px 50% 40% 50%; }
.trophy-socket.small { width: 54px; height: 54px; border-radius: 50%; }
.profile-rail { position: sticky; top: 82px; }
.profile-rail-card { padding: 19px; scroll-margin-top: 92px; }
.profile-facts { margin: 15px 0 0; }
.profile-facts div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.05); }
.profile-facts dt { color: var(--ink-3); font-size: 10.5px; }
.profile-facts dd { margin: 0; color: var(--ink-2); font-size: 10.5px; text-align: right; }
.profile-rail-bio { margin: 13px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05); color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.activity-empty { display: flex; gap: 10px; align-items: center; padding: 14px 0 9px; color: var(--ink-3); font-size: 11.5px; }
.activity-empty i { width: 7px; height: 7px; border-radius: 50%; background: rgba(155,93,229,.38); box-shadow: 13px 0 0 rgba(155,93,229,.22),26px 0 0 rgba(155,93,229,.12); margin-right: 25px; }
.activity-empty p,.rail-note { margin: 0; }
.rail-note { color: var(--ink-3); font-size: 10.5px; line-height: 1.5; }
.profile-next a { display: block; margin: 0 -7px; padding: 12px 7px; color: inherit; text-decoration: none; border-top: 1px solid rgba(255,255,255,.05); }
.profile-next a:first-of-type { margin-top: 8px; }
.profile-next a:hover strong { color: var(--violet-lo); }
.profile-next strong,.profile-next span { display: block; }
.profile-next strong { color: var(--ink-2); font-size: 11.5px; }
.profile-next span { color: var(--ink-3); font-size: 10.5px; margin-top: 2px; }

/* ───────────────────────────────────────────────────── profile fusion v2
   Exhibit owns the calling card and binder; Broadcast owns the loadout below.
   This is intentionally not a stack of dashboard cards: each surface has a
   different physical job, edge treatment and silhouette. */
.profile-page {
  --signal: #6fe9f7; --signal-soft: rgba(111,233,247,.18);
  --signal-violet: #c398f0; --panel: rgba(17,10,25,.72);
  position: relative; isolation: isolate;
}
.profile-page::before {
  content: ""; position: absolute; z-index: -1; inset: 250px 0 auto;
  width: 100%;
  height: 760px; pointer-events: none; opacity: .52;
  background:
    linear-gradient(90deg,transparent 0 9.9%,rgba(111,233,247,.035) 10%,transparent 10.1% 89.9%,rgba(195,152,240,.035) 90%,transparent 90.1%),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(255,255,255,.014) 44px 45px);
  mask-image: linear-gradient(transparent,#000 18%,#000 74%,transparent);
}
.profile-hero {
  min-height: 370px; border-radius: 3px 24px 3px 3px;
  border-color: rgba(244,239,250,.16);
  box-shadow: 0 35px 100px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025);
}
.profile-hero::after {
  background:
    linear-gradient(90deg,rgba(9,5,14,.93) 0%,rgba(9,5,14,.62) 53%,rgba(9,5,14,.12) 100%),
    linear-gradient(0deg,rgba(9,5,14,.92),transparent 68%);
}
.profile-hero::before {
  width: min(520px, 100%); height: 520px; aspect-ratio: auto; right: 0; top: -164px;
  border-radius: 50%; opacity: .54;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(111,233,247,.20) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(111,233,247,.20) 50%,transparent 50.3%),
    repeating-radial-gradient(circle,transparent 0 38px,rgba(255,255,255,.065) 39px 40px);
}
.profile-register { position: absolute; z-index: 3; width: 44px; height: 44px; pointer-events: none; }
.profile-register::before,.profile-register::after { content: ""; position: absolute; background: var(--signal); box-shadow: 0 0 12px rgba(111,233,247,.34); }
.profile-register::before { width: 1px; height: 26px; }
.profile-register::after { width: 26px; height: 1px; }
.profile-register.reg-nw { left: 14px; top: 14px; }
.profile-register.reg-nw::before,.profile-register.reg-nw::after { left: 0; top: 0; }
.profile-register.reg-se { right: 14px; bottom: 14px; transform: rotate(180deg); }
.profile-register.reg-se::before,.profile-register.reg-se::after { left: 0; top: 0; }
.profile-hero-top { padding: 18px 28px 18px 36px; border-bottom: 1px solid rgba(255,255,255,.055); }
.profile-context { color: rgba(244,239,250,.72); font-size: 10.5px; letter-spacing: .11em; }
.profile-accession { color: rgba(244,239,250,.52); font: 600 10px var(--mono); letter-spacing: .11em; }
.profile-hero-body {
  grid-template-columns: minmax(0,1fr) 215px auto; gap: 26px;
  padding: 47px 34px 39px; align-items: end;
}
.profile-identity-lockup { display: flex; align-items: center; gap: 25px; min-width: 0; }
.profile-identity { min-width: 0; }
.profile-avatar {
  flex: none; width: 112px; outline: 0; --avatar-shadow: drop-shadow(0 18px 30px rgba(0,0,0,.48));
}
.profile-avatar::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 7px rgba(9,5,14,.34); }
.profile-eyebrow { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.profile-identity h1 { font-size: clamp(37px,5vw,62px); overflow-wrap: break-word; }
.profile-handle { display: flex; align-items: center; gap: 9px; font: 500 12px var(--mono); letter-spacing: .04em; }
.profile-handle span { width: 21px; height: 1px; background: var(--signal); opacity: .6; }
.profile-hero-signal {
  position: relative; min-height: 102px; padding: 14px 15px 13px 19px;
  border-left: 2px solid var(--signal); color: rgba(244,239,250,.72);
  background: linear-gradient(90deg,rgba(111,233,247,.09),transparent);
}
.profile-hero-signal::after { content: ""; position: absolute; right: 0; top: 0; width: 25px; height: 1px; background: var(--signal); opacity: .55; }
.profile-hero-signal span,.profile-hero-signal strong,.profile-hero-signal small { display: block; }
.profile-hero-signal .signal-kicker { color: var(--signal); font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.profile-hero-signal strong { margin-top: 10px; color: var(--ink); font: 650 13px var(--mono); letter-spacing: .06em; }
.profile-hero-signal .signal-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-3); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.profile-hero-signal .signal-line i { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.profile-hero-signal small { margin-top: 7px; color: rgba(244,239,250,.55); font: 10px var(--mono); }
.profile-actions { align-self: center; }
.profile-actions .btn-secondary { border-color: rgba(111,233,247,.22); border-radius: 3px; font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.profile-actions .btn-secondary:hover { border-color: var(--signal); box-shadow: 0 0 18px rgba(111,233,247,.10); }
.profile-hero-foot { padding: 18px 34px; border-top-color: rgba(244,239,250,.09); }
.profile-bio { color: rgba(244,239,250,.82); }
.profile-bio.quiet { color: rgba(244,239,250,.34); font-style: italic; }
.profile-since { color: rgba(111,233,247,.52); }

.profile-room-nav {
  position: relative; gap: 0; margin: 0 0 20px; padding: 0 10px 0 0;
  min-height: 47px; border-top: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,rgba(155,93,229,.075),rgba(255,255,255,.012));
}
.room-nav-label {
  align-self: stretch; display: grid; place-items: center; flex: none; padding: 0 17px;
  border-right: 1px solid var(--profile-edge); color: var(--signal);
  font: 600 7.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.profile-room-nav a { position: relative; padding: 16px 13px 14px; border-radius: 0; font: 540 10.5px var(--font); }
.profile-room-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 1px; background: var(--signal); transition: left var(--t-fast),right var(--t-fast); }
.profile-room-nav a:hover::after { left: 11px; right: 11px; }

/* The account menu has one Profile destination. Room, Studio, Circle and
   Privacy are modes inside it, presented as a console rather than four
   unrelated settings links. */
.profile-mode-dock {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 10px;
  overflow:hidden; border-block:1px solid var(--line-strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 6%,transparent),transparent 66%);
}
.profile-mode-dock a {
  position:relative; display:grid; grid-template-columns:27px minmax(0,1fr) auto;
  align-items:center; gap:10px; min-height:72px; padding:11px 13px;
  border-right:1px solid var(--line); color:inherit; text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.profile-mode-dock a:last-child { border-right:0; }
.profile-mode-dock a::after {
  position:absolute; right:50%; bottom:-1px; left:50%; height:2px;
  background:linear-gradient(90deg,var(--violet),var(--live)); content:"";
  transition:right var(--t-fast),left var(--t-fast);
}
.profile-mode-dock a:hover,.profile-mode-dock a:focus-visible { background:color-mix(in srgb,var(--violet) 7%,transparent); }
.profile-mode-dock a:hover::after,.profile-mode-dock a:focus-visible::after,.profile-mode-dock a.is-active::after { right:12px; left:12px; }
.profile-mode-dock a.is-active { background:linear-gradient(120deg,color-mix(in srgb,var(--violet) 12%,transparent),color-mix(in srgb,var(--live) 3%,transparent)); }
.profile-mode-dock i { color:var(--live); font:600 8px var(--mono); font-style:normal; letter-spacing:.12em; }
.profile-mode-dock span,.profile-mode-dock strong,.profile-mode-dock small { display:block; min-width:0; }
.profile-mode-dock strong { color:var(--ink); font-size:11.5px; }
.profile-mode-dock small { margin-top:4px; overflow:hidden; color:var(--ink-3); font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.profile-mode-dock em { color:var(--ink-3); font:600 6.5px var(--mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.profile-mode-dock a.is-active em { color:var(--violet-lo); }
@media (forced-colors: active) {
  .profile-mode-dock a[aria-current="page"] { outline:2px solid Highlight; outline-offset:-3px; }
  .profile-mode-dock a[aria-current="page"]::after { background:Highlight; }
}

.profile-telemetry {
  display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 84px;
  margin: 0 0 16px; border-block: 1px solid var(--profile-edge); scroll-margin-top: 92px;
  background: linear-gradient(90deg,rgba(111,233,247,.025),transparent 60%);
}
.telemetry-lead,.lane-rail-label { display: flex; flex-direction: column; justify-content: center; }
.telemetry-lead { padding: 15px 20px 15px 2px; border-right: 1px solid var(--profile-edge); }
.telemetry-lead span,.lane-rail-label span { color: var(--signal); font: 600 7px var(--mono); letter-spacing: .15em; }
.telemetry-lead strong,.lane-rail-label strong { margin-top: 6px; color: var(--ink-2); font-size: 12px; }
.profile-portfolio-entry {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 7px;
  min-height: 36px; margin-top: 10px; padding: 0 10px;
  border: 1px solid rgba(155,93,229,.34); border-radius: 3px;
  background: rgba(155,93,229,.075); color: var(--violet-lo);
  font: 600 9px var(--mono); letter-spacing: .04em; text-decoration: none;
}
.profile-portfolio-entry i { color: var(--signal); font-style: normal; transition: transform var(--t-fast) var(--ease-out); }
.profile-portfolio-entry:hover { border-color: rgba(111,233,247,.48); background: rgba(111,233,247,.07); color: var(--ink); }
.profile-portfolio-entry:hover i { transform: translate(2px,-2px); }
.profile-portfolio-entry:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.profile-stats { grid-template-columns: repeat(5,minmax(0,1fr)); align-self: stretch; border: 0; }
.profile-stats .stat { display: flex; flex-direction: column; justify-content: center; padding: 13px 17px; border-left: 1px solid var(--profile-edge); }
.profile-stats .stat:first-child { padding-left: 17px; border-left: 0; }
.profile-stats .n { color: var(--ink); font-size: clamp(15px,2vw,21px); }
.profile-stats .k { color: rgba(244,239,250,.42); font: 600 7px var(--mono); letter-spacing: .13em; }
.telemetry-muted { display: flex; align-items: center; gap: 11px; padding: 0 22px; color: var(--ink-3); font-size: 11px; }
.telemetry-muted i { width: 28px; height: 1px; background: rgba(111,233,247,.42); }

.profile-lane-rail {
  display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: stretch;
  margin: 0 0 26px; border-bottom: 1px solid var(--profile-edge); scroll-margin-top: 92px;
}
.lane-rail-label { padding: 13px 20px 14px 2px; }
.profile-lane-rail .profile-interest-list { flex-wrap: nowrap; overflow-x: auto; gap: 0; }
.profile-lane-rail .profile-interest { flex: 1 0 145px; min-width: 145px; padding: 13px 14px; border-left: 1px solid var(--profile-edge); border-bottom: 0; }
.profile-lane-rail .profile-interest::before { inset: auto 14px 0; width: auto; height: 1px; }
.lane-empty { display: flex; align-items: center; padding: 0 18px; border-left: 1px solid var(--profile-edge); color: var(--ink-3); font-size: 11px; }

.profile-broadcast-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; counter-reset: signal-panel; }
.signal-panel {
  position: relative; overflow: hidden; min-width: 0; padding: 28px;
  border: 1px solid var(--profile-edge); border-radius: 3px;
  background: var(--panel); box-shadow: 0 20px 55px rgba(0,0,0,.17);
  scroll-margin-top: 92px;
}
.signal-panel::before,.signal-panel::after { content: ""; position: absolute; pointer-events: none; }
.signal-panel::before { width: 42px; height: 42px; right: -1px; top: -1px; border-top: 1px solid var(--signal); border-right: 1px solid var(--signal); opacity: .45; }
.signal-panel::after { left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--signal),transparent); opacity: .18; }
.panel-index { display: block; margin-bottom: 18px; color: rgba(111,233,247,.62); font: 600 9px var(--mono); letter-spacing: .15em; }
.signal-panel .profile-module-head { align-items: flex-start; margin: 0 0 22px; padding: 0; }
.signal-panel .profile-label { color: rgba(244,239,250,.46); letter-spacing: .15em; }
.signal-panel h2 { font-size: clamp(20px,2.4vw,29px); }
.signal-panel .profile-module-state { padding: 5px 9px; border: 1px solid rgba(111,233,247,.14); color: rgba(111,233,247,.62); }

.profile-current-chase {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 73% 50%,color-mix(in srgb,var(--signal) 9%,transparent),transparent 34%),
    linear-gradient(115deg,color-mix(in srgb,var(--violet) 7%,var(--panel)),var(--panel));
}
.current-chase-card {
  position: relative; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(150px,.7fr) minmax(190px,.8fr) auto;
  align-items: stretch; min-height: 160px; overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--signal) 17%,var(--profile-edge));
  background: color-mix(in srgb,var(--ground-0) 58%,transparent); color: inherit; text-decoration: none;
}
.current-chase-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),color-mix(in srgb,var(--ink) 2%,transparent) calc(10% - 1px) 10%);
}
.current-chase-copy,.current-chase-progress,.current-chase-route {
  position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 23px;
}
.current-chase-progress,.current-chase-route { border-left: 1px solid var(--profile-edge); }
.current-chase-category {
  margin-bottom: 8px; color: var(--signal); font: 600 7px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.current-chase-copy > strong { overflow: hidden; color: var(--ink); font: 600 clamp(18px,2.4vw,29px)/1.05 var(--font-display); letter-spacing: -.025em; text-overflow: ellipsis; }
.current-chase-copy p { max-width: 56ch; margin: 9px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.5; }
.current-chase-count { display: flex; align-items: baseline; gap: 6px; }
.current-chase-count strong { color: var(--ink); font: 650 31px var(--font-display); }
.current-chase-count i { color: var(--ink-3); font: normal 11px var(--mono); }
.current-chase-track { display: block; height: 4px; margin-top: 11px; overflow: hidden; background: color-mix(in srgb,var(--ink) 7%,transparent); }
.current-chase-track i { display: block; width: var(--chase-progress,0%); height: 100%; background: linear-gradient(90deg,var(--violet),var(--signal)); }
.current-chase-percent { margin-top: 7px; color: var(--violet-lo); font: 600 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.current-chase-route > span { color: var(--ink-3); font: 600 7px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.current-chase-route > strong { margin-top: 7px; color: var(--ink-2); font: 600 18px var(--font-display); }
.current-chase-route small { max-width: 32ch; margin-top: 8px; color: var(--ink-3); font-size: 8px; line-height: 1.45; }
.current-chase-open {
  position: relative; z-index: 1; display: grid; place-items: center; min-width: 68px; border-left: 1px solid var(--profile-edge);
  color: var(--signal); font: 600 7px var(--mono); letter-spacing: .1em; text-align: center; writing-mode: vertical-rl;
}
.current-chase-open i { margin-top: 7px; font-style: normal; }
.current-chase-card:hover { border-color: color-mix(in srgb,var(--signal) 42%,var(--profile-edge)); }
.current-chase-empty { display: flex; align-items: center; gap: 18px; min-height: 145px; padding: 22px; border: 1px dashed var(--profile-edge); }
.current-chase-empty > span { width: 52px; height: 68px; border: 1px solid color-mix(in srgb,var(--violet-lo) 40%,transparent); box-shadow: 9px 7px 0 -4px var(--violet-dim); transform: skewY(-4deg); }
.current-chase-empty strong { color: var(--ink-2); }
.current-chase-empty p { margin: 5px 0 9px; color: var(--ink-3); font-size: 11px; }
.current-chase-empty a { color: var(--signal); font: 600 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.profile-card-showcase { grid-column: 1 / -1; padding: 28px 32px 32px; background:
  radial-gradient(circle at 50% 118%,rgba(155,93,229,.13),transparent 47%),
  repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(244,239,250,.018) calc(16.666% - 1px) 16.666%),var(--panel); }
.profile-card-showcase::before { border-color: var(--signal); }
.profile-featured-grid { gap: clamp(10px,1.5vw,19px); }
.profile-featured-art { border-radius: 5px; box-shadow: 0 19px 32px rgba(0,0,0,.34); }
.profile-featured-card:nth-child(2n) .profile-featured-art { transform: translateY(7px); }
.profile-featured-copy { padding-top: 13px; }
.profile-featured-copy strong { font-size: 11px; }
.profile-featured-copy small { color: rgba(244,239,250,.45); }
.showcase-empty-slots { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 13px; align-items: end; }
.showcase-empty-slots > span { position: relative; display: block; aspect-ratio: 2.5/3.5; border: 1px dashed rgba(195,152,240,.22); background: linear-gradient(145deg,rgba(155,93,229,.045),transparent); }
.showcase-empty-slots > span::before { content: ""; position: absolute; width: 13px; height: 18px; left: calc(50% - 7px); top: calc(50% - 9px); border: 1px solid rgba(111,233,247,.22); }
.showcase-empty-slots > span i { position: absolute; left: 8px; top: 7px; color: rgba(244,239,250,.22); font: normal 7px var(--mono); }
.showcase-empty-slots > strong { grid-column: 1/-1; margin-top: 4px; color: var(--ink-3); font-size: 11px; text-align: center; }

.profile-binder-exhibit { grid-column: span 8; min-height: 510px; background:
  radial-gradient(circle at 28% 48%,color-mix(in srgb,var(--binder-accent) 14%,transparent),transparent 38%),var(--panel); }
.profile-binder-stage { display:grid; grid-template-columns:minmax(190px,.78fr) minmax(220px,1.22fr); gap:clamp(24px,5vw,64px); align-items:center; min-height:305px; padding:18px 4px 10px; color:inherit; perspective:1200px; }
.profile-binder-object { position:relative; display:grid; place-items:center; min-height:282px; color:inherit; text-decoration:none; }
.profile-binder-cover { position:relative; z-index:2; display:flex; width:182px; aspect-ratio:.72; overflow:hidden; border:1px solid color-mix(in srgb,var(--binder-accent) 34%,rgba(255,255,255,.13)); border-radius:4px 15px 15px 4px; background:linear-gradient(135deg,color-mix(in srgb,var(--binder-base) 82%,var(--ground-0)),color-mix(in srgb,var(--binder-accent) 42%,var(--ground-1))); box-shadow:-10px 20px 38px rgba(0,0,0,.4),inset 16px 0 24px rgba(0,0,0,.22); transform:rotateY(10deg) rotateZ(-2deg); transition:transform 420ms var(--ease-out),box-shadow 420ms var(--ease-out); }
.profile-binder-cover::after { content:""; position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(125deg,transparent 0 5px,rgba(255,255,255,.8) 6px 7px); mix-blend-mode:overlay; }
.profile-binder-spine { position:absolute; left:14px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.23); box-shadow:4px 0 12px rgba(0,0,0,.45); }
.profile-binder-cover .emblem { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); opacity:.48; }
.profile-binder-label { position:absolute; z-index:1; left:30px; right:18px; bottom:20px; }
.profile-binder-label strong,.profile-binder-label small { display:block; }
.profile-binder-label strong { margin-top:7px; color:var(--ink); font-size:14px; line-height:1.2; }
.profile-binder-label small { color:rgba(255,255,255,.52); font:6.5px var(--mono); letter-spacing:.13em; }
.profile-binder-shadow { position:absolute; left:20%; right:4%; bottom:4%; height:30px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(14px); transform:skewX(-12deg); }
.profile-binder-object:hover .profile-binder-cover { transform:rotateY(17deg) rotateZ(-3deg) translateY(-3px); box-shadow:-14px 27px 48px rgba(0,0,0,.46),inset 16px 0 24px rgba(0,0,0,.22); }
.profile-binder-story { min-width:0; padding:22px 0 22px clamp(20px,4vw,42px); border-left:1px solid var(--profile-edge); }
.profile-binder-story > p { max-width:42ch; margin:9px 0 19px; color:var(--ink-2); font-size:12px; line-height:1.65; }
.profile-binder-story dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-block:1px solid var(--profile-edge); }
.profile-binder-story dl div { padding:13px 10px; border-left:1px solid var(--profile-edge); }
.profile-binder-story dl div:first-child { border-left:0; padding-left:0; }
.profile-binder-story dt { color:var(--ink-3); font:6.5px var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.profile-binder-story dd { margin:5px 0 0; color:var(--ink); font:700 12px var(--font); text-transform:uppercase; }
.profile-binder-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }
.profile-binder-actions a { min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--profile-edge); color:var(--ink-2); font:650 8px var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.profile-binder-actions a:first-child { border-color:color-mix(in srgb,var(--signal) 42%,transparent); color:var(--signal); }
.profile-binder-actions a:hover,.profile-binder-actions a:focus-visible { border-color:var(--signal); color:var(--ink); }
.binder-index { display:flex; gap:10px; overflow-x:auto; margin:13px -28px -28px; padding:14px 18px 16px; border-top:1px solid var(--profile-edge); scroll-snap-type:x proximity; scrollbar-width:thin; }
.binder-index-item { flex:0 0 142px; display:grid; grid-template-rows:112px auto; align-items:end; gap:9px; padding:10px; border:1px solid var(--profile-edge); border-radius:var(--r-sm); color:inherit; background:color-mix(in srgb,var(--panel) 82%,transparent); text-decoration:none; scroll-snap-align:start; }
.binder-index-item.current { border-color:color-mix(in srgb,var(--signal) 42%,var(--profile-edge)); background:color-mix(in srgb,var(--signal) 5%,var(--panel)); }
.binder-index-cover { position:relative; display:flex; width:72px; aspect-ratio:.72; align-self:center; justify-self:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--profile-edge)); border-radius:3px 9px 9px 3px; background:linear-gradient(145deg,color-mix(in srgb,var(--base) 86%,var(--ground-0)),color-mix(in srgb,var(--accent) 46%,var(--ground-1))); box-shadow:-6px 10px 18px color-mix(in srgb,var(--ground-0) 52%,transparent),inset 8px 0 12px color-mix(in srgb,var(--ground-0) 24%,transparent); transform:rotateY(8deg) rotateZ(-1.5deg); transition:transform var(--t-med) var(--ease-out); }
.binder-index-cover::after { content:""; position:absolute; inset:0; opacity:.12; background:repeating-linear-gradient(125deg,transparent 0 5px,var(--ink) 6px 7px); mix-blend-mode:overlay; }
.binder-index-cover > i { position:absolute; left:9px; top:0; bottom:0; width:1px; background:color-mix(in srgb,var(--ink) 24%,transparent); box-shadow:3px 0 8px color-mix(in srgb,var(--ground-0) 52%,transparent); }
.binder-index-cover > b { position:absolute; z-index:1; left:16px; right:7px; bottom:9px; overflow:hidden; color:var(--ink); font:650 7px/1.18 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.binder-index-item:hover .binder-index-cover,.binder-index-item:focus-visible .binder-index-cover { transform:rotateY(13deg) rotateZ(-2deg) translateY(-2px); }
.binder-index-item span,.binder-index-item strong,.binder-index-item small { display: block; min-width: 0; }
.binder-index-item > span:last-child { width:100%; }
.binder-index-item strong { overflow:hidden; color:var(--ink-2); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.binder-index-item small { margin-top:4px; color:var(--ink-3); font:7px/1.35 var(--mono); text-transform:uppercase; }

.profile-trophy-signal { grid-column: span 4; min-height: 535px; }
.trophy-signal-stage { position: relative; display: grid; place-items: center; min-height: 280px; overflow: hidden; background:
  linear-gradient(90deg,transparent 49.8%,rgba(195,152,240,.06) 50%,transparent 50.2%),
  linear-gradient(0deg,transparent 49.8%,rgba(195,152,240,.06) 50%,transparent 50.2%); }
.trophy-socket { position: relative; z-index: 3; width: 112px; height: 112px; border: 1px solid rgba(195,152,240,.42); border-radius: 0; clip-path: polygon(50% 0,88% 20%,100% 62%,72% 100%,28% 100%,0 62%,12% 20%); background: radial-gradient(circle,rgba(155,93,229,.15),rgba(14,7,20,.55) 67%); box-shadow: inset 0 0 35px rgba(155,93,229,.10),0 0 40px rgba(155,93,229,.10); }
.trophy-socket::before,.trophy-socket::after,.trophy-socket i { content: ""; position: absolute; inset: 20px; clip-path: inherit; border: 1px dashed rgba(111,233,247,.21); }
.trophy-socket::after { inset: 42px; background: rgba(111,233,247,.12); border: 0; }
.signal-orbit { position: absolute; z-index: 1; border: 1px solid rgba(195,152,240,.13); border-radius: 50%; }
.orbit-a { width: 210px; height: 210px; }
.orbit-b { width: 260px; height: 260px; border-style: dashed; }
.signal-slots { position: absolute; z-index: 4; display: flex; gap: 52px; bottom: 23px; }
.signal-slots span { width: 20px; height: 20px; border: 1px solid rgba(111,233,247,.2); transform: rotate(45deg); background: #100a17; }
.signal-caption { padding-top: 16px; border-top: 1px solid var(--profile-edge); }
.signal-caption strong,.signal-caption span { display: block; }
.signal-caption strong { color: var(--ink-2); font-size: 11.5px; }
.signal-caption span { max-width: 62ch; margin-top: 5px; color: var(--ink-3); font-size: 10px; line-height: 1.5; }
.trophy-next-wins { display:grid; gap:9px; margin:10px 0 15px; }
.trophy-next-card { position:relative; display:grid; min-height:146px; padding:15px; overflow:hidden; border:1px solid var(--profile-edge); border-radius:var(--r-sm); background:color-mix(in srgb,var(--panel) 88%,var(--signal) 2%); color:inherit; text-decoration:none; transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast); }
.trophy-next-card::after { position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,color-mix(in srgb,var(--violet-ink) 8%,transparent),transparent 44%); content:""; }
.trophy-next-card:hover,.trophy-next-card:focus-visible { border-color:color-mix(in srgb,var(--signal) 45%,var(--profile-edge)); background:color-mix(in srgb,var(--panel) 92%,var(--signal) 5%); transform:translateY(-2px); }
.trophy-next-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink-3); font:600 7px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.trophy-next-top i { overflow:hidden; color:color-mix(in srgb,var(--signal) 72%,var(--ink-2)); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.trophy-next-top b { flex:none; color:var(--ink-2); }
.trophy-next-card > strong { position:relative; z-index:1; margin-top:10px; color:var(--ink); font-size:13px; line-height:1.24; }
.trophy-next-track { position:relative; z-index:1; display:block; height:5px; margin:12px 0 8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--ground-0) 65%,var(--line)); }
.trophy-next-track > i { display:block; width:var(--win-progress); height:100%; min-width:2px; border-radius:inherit; background:linear-gradient(90deg,var(--violet-ink),var(--signal)); }
.trophy-next-card > small { position:relative; z-index:1; color:var(--ink-3); font-size:9px; line-height:1.45; }
.trophy-next-card > em { position:relative; z-index:1; align-self:end; margin-top:10px; color:color-mix(in srgb,var(--signal) 78%,var(--ink)); font:600 8px var(--font); font-style:normal; }
.trophy-next-caption { margin-top:auto; }

.profile-network-signal { grid-column: span 5; min-height: 0; }
.network-frequencies > span { display: block; margin-bottom: 7px; color: rgba(111,233,247,.54); font: 600 6.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.network-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--profile-edge); }
.network-actions > * { flex: 1 1 150px; }
.network-frequencies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.network-frequencies > span { flex: 0 0 100%; margin: 0 0 1px; }
.network-frequencies a { max-width: 100%; overflow: hidden; padding: 5px 7px; border-left: 2px solid rgba(195,152,240,.38); background: rgba(155,93,229,.045); color: rgba(244,239,250,.62); font-size: 8px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.network-frequencies a:hover { border-color: var(--signal); color: var(--signal); }
.profile-activity-signal { grid-column: span 7; min-height: 355px; }
.activity-wave { display: flex; align-items: center; justify-content: space-around; height: 172px; padding: 0 8%; border-block: 1px solid rgba(255,255,255,.035); background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.025) 24px 25px); }
.activity-wave i { width: 1px; height: 18%; background: rgba(195,152,240,.24); box-shadow: 0 0 8px rgba(195,152,240,.16); }
.activity-wave i:nth-child(2),.activity-wave i:nth-child(6) { height: 34%; }.activity-wave i:nth-child(3),.activity-wave i:nth-child(5) { height: 52%; }.activity-wave i:nth-child(4) { height: 74%; background: var(--signal); opacity: .45; }

.profile-quiet-room { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 190px; margin-top: 16px; border: 1px dashed var(--profile-edge); color: var(--ink-3); }
.profile-quiet-room strong { color: var(--ink-2); }.profile-quiet-room p { margin: 5px 0; font-size: 11px; }

/* Owner/visitor mode belongs to the finished room, not the customization
   workspace. The ribbon reads like a temporary inspection instrument and
   vanishes completely for actual visitors. */
.profile-preview-ribbon {
  position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center; gap: 15px; min-height: 74px; margin: 0 0 13px; padding: 12px 15px;
  overflow: hidden; border: 1px solid rgba(111,233,247,.25); border-left: 3px solid var(--signal);
  border-radius: 2px; background:
    linear-gradient(90deg,rgba(111,233,247,.085),transparent 38%),rgba(12,7,18,.92);
  box-shadow: 0 18px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
}
.profile-preview-ribbon::after {
  content: "PUBLIC FILTER / ACTIVE"; position: absolute; right: 14px; top: 7px;
  color: rgba(111,233,247,.28); font: 600 5.5px var(--mono); letter-spacing: .15em;
}
.profile-preview-ribbon.door-closed { border-color: rgba(240,199,110,.25); border-left-color: #e7ca84; background: linear-gradient(90deg,rgba(240,199,110,.075),transparent 38%),rgba(12,7,18,.92); }
.profile-preview-ribbon.door-closed::after { content: "PUBLIC DOOR / CLOSED"; color: rgba(240,199,110,.38); }
.preview-radar { position: relative; display: block; width: 38px; height: 38px; border: 1px solid rgba(111,233,247,.28); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 6px,rgba(111,233,247,.08) 7px 8px); }
.door-closed .preview-radar { border-color: rgba(240,199,110,.28); background: repeating-radial-gradient(circle,transparent 0 6px,rgba(240,199,110,.07) 7px 8px); }
.preview-radar::before,.preview-radar::after { content: ""; position: absolute; inset: 50% 5px auto; height: 1px; background: rgba(111,233,247,.16); }
.preview-radar::after { inset: 5px auto 5px 50%; width: 1px; height: auto; }
.preview-radar i { position: absolute; left: 50%; bottom: 50%; width: 17px; height: 1px; transform: rotate(-36deg); transform-origin: left; background: linear-gradient(90deg,var(--signal),transparent); }
.profile-preview-ribbon strong,.profile-preview-ribbon p { display: block; }
.profile-preview-ribbon strong { color: var(--ink-2); font-size: 12px; }
.profile-preview-ribbon p { margin: 3px 0 0; color: var(--ink-3); font-size: 9.5px; line-height: 1.4; }
.profile-preview-actions { display: flex; gap: 6px; padding-top: 8px; }
.profile-preview-actions a { padding: 8px 10px; border: 1px solid var(--profile-edge); border-radius: 2px; color: var(--ink-2); font-size: 9px; text-decoration: none; white-space: nowrap; }
.profile-preview-actions a:last-child { border-color: rgba(111,233,247,.26); color: var(--signal); background: rgba(111,233,247,.055); }
.profile-preview-actions a:hover { border-color: rgba(111,233,247,.43); color: var(--signal); }

.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.profile-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
  border: 1px solid rgba(244,239,250,.16); border-radius: 3px; background: rgba(9,5,14,.55);
  color: var(--ink-2); font: 600 9px var(--font); text-decoration: none; cursor: pointer;
  transition: color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.profile-action i { width: 7px; height: 7px; margin-right: 7px; border: 1px solid var(--signal); border-radius: 50%; box-shadow: 0 0 9px rgba(111,233,247,.28); }
.profile-action.primary { border-color: rgba(195,152,240,.38); background: linear-gradient(135deg,rgba(155,93,229,.28),rgba(155,93,229,.11)); color: var(--ink); }
.profile-action:hover { border-color: rgba(111,233,247,.44); color: var(--signal); background: rgba(111,233,247,.07); }
.profile-action[data-copied] { border-color: rgba(74,222,128,.42); color: #86efac; background: rgba(74,222,128,.08); }

/* ───────────────────────────────────────────────────────── profile studio
   Games consistently separate the identity seen by other people from the
   inventory used to equip it. Chaserr's Studio is therefore a loadout
   workbench: one large rehearsal surface, a small set of named bays, and
   explicit exits to the finished room. */
.profile-studio-view .wrap { width: min(1320px,calc(100% - 40px)); }
.studio-command {
  position:relative; display:flex; align-items:end; justify-content:space-between; gap:28px;
  margin:14px 0 18px; padding:25px 0 24px; border-bottom:1px solid var(--line-strong);
}
.studio-command::after { content:""; position:absolute; left:0; bottom:-1px; width:min(34%,360px); height:2px; background:linear-gradient(90deg,var(--violet),var(--live),transparent); }
.studio-command-copy { max-width:760px; }
.studio-command h1 { max-width:16ch; margin:5px 0 9px; font-size:clamp(33px,4.5vw,58px); line-height:.96; letter-spacing:-.045em; }
.studio-command p { max-width:62ch; margin:0; color:var(--ink-2); font-size:13px; line-height:1.55; }
.studio-command-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.studio-command-actions .profile-action { min-height:44px; }
.studio-loadout-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 24px; border-block:1px solid var(--line); }
.studio-loadout-nav a { display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 10px; min-height:72px; padding:13px 15px; border-right:1px solid var(--line); color:inherit; text-decoration:none; }
.studio-loadout-nav a:last-child { border-right:0; }
.studio-loadout-nav a:hover { background:color-mix(in srgb,var(--violet) 7%,transparent); }
.studio-loadout-nav i { grid-row:1 / span 2; color:var(--live); font:600 9px var(--mono); font-style:normal; letter-spacing:.12em; }
.studio-loadout-nav span,.studio-loadout-nav strong,.studio-loadout-nav small { display:block; min-width:0; }
.studio-loadout-nav strong { color:var(--ink); font-size:12px; }
.studio-loadout-nav small { margin-top:3px; overflow:hidden; color:var(--ink-3); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.studio-loadout-nav em { grid-column:2; color:var(--violet-lo); font:600 7.5px var(--mono); font-style:normal; letter-spacing:.09em; text-transform:uppercase; }
.profile-studio-layout { display:grid; grid-template-columns:minmax(340px,.8fr) minmax(0,1.2fr); grid-template-areas:"preview editor"; gap:clamp(22px,3vw,42px); align-items:start; }
.profile-studio-editor { grid-area:editor; min-width:0; }
.profile-studio-editor .sect { scroll-margin-top:88px; }
.profile-studio-preview { grid-area:preview; position:sticky; top:82px; min-width:0; }
.studio-stage-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:10px; padding:0 2px 10px; border-bottom:1px solid var(--line); }
.studio-stage-head strong { display:block; color:var(--ink); font-size:13px; }
.studio-stage-head em { color:var(--ink-3); font:600 7.5px var(--mono); font-style:normal; letter-spacing:.11em; text-transform:uppercase; }
.studio-preview-card { position:relative; min-height:390px; overflow:hidden; isolation:isolate; border:1px solid var(--line-strong); border-radius:3px 28px 3px 3px; background:var(--ground-0); box-shadow:0 30px 70px color-mix(in srgb,var(--ground-0) 72%,transparent); }
.studio-preview-banner { position:absolute; z-index:-2; inset:0; width:100%; height:100%; border-radius:0; }
.studio-preview-card::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,color-mix(in srgb,var(--ground-0) 94%,transparent),color-mix(in srgb,var(--ground-0) 24%,transparent) 72%),linear-gradient(90deg,color-mix(in srgb,var(--ground-0) 72%,transparent),transparent); }
.studio-preview-register { position:absolute; inset:13px; pointer-events:none; }
.studio-preview-register i { position:absolute; width:34px; height:34px; border-color:color-mix(in srgb,var(--live) 68%,transparent); border-style:solid; }
.studio-preview-register i:first-child { left:0; top:0; border-width:1px 0 0 1px; }
.studio-preview-register i:last-child { right:0; bottom:0; border-width:0 1px 1px 0; }
.studio-preview-identity { position:absolute; inset:auto 25px 54px; display:grid; grid-template-columns:88px minmax(0,1fr); align-items:end; gap:20px; }
.studio-preview-avatar { display:block; width:88px; filter:drop-shadow(0 18px 25px color-mix(in srgb,var(--ground-0) 70%,transparent)); }
.studio-preview-copy { min-width:0; }
.studio-preview-kicker { color:var(--live); font:600 7px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.studio-preview-copy h3 { margin:7px 0 3px; overflow-wrap:anywhere; color:var(--ink); font-size:clamp(24px,3vw,39px); line-height:.98; letter-spacing:-.04em; }
.studio-preview-handle { color:var(--violet-lo); font:9px var(--mono); }
.studio-preview-copy p { max-width:42ch; margin:13px 0 0; color:var(--ink-2); font-size:11px; line-height:1.5; }
.studio-preview-copy small { display:block; margin-top:10px; color:var(--ink-3); font:7.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.studio-preview-foot { position:absolute; inset:auto 0 0; display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:38px; padding:0 17px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--ground-0) 86%,transparent); }
.studio-preview-foot span,.studio-preview-foot strong { font:600 7px var(--mono); letter-spacing:.12em; }
.studio-preview-foot span { color:var(--live); }.studio-preview-foot strong { color:var(--ink-2); }
.studio-equipped-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; border-block:1px solid var(--line); }
.studio-equipped-strip div { min-width:0; padding:12px 10px; border-right:1px solid var(--line); }
.studio-equipped-strip div:last-child { border-right:0; }
.studio-equipped-strip span,.studio-equipped-strip strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-equipped-strip span { color:var(--live); font:600 6.5px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.studio-equipped-strip strong { margin-top:6px; color:var(--ink-2); font-size:9.5px; }
.studio-preview-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.studio-privacy-link { min-height:44px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid var(--line); border-radius:var(--r-control); background:color-mix(in srgb,var(--panel) 76%,transparent); color:inherit; text-align:center; text-decoration:none; }
.studio-privacy-link.primary { border-color:color-mix(in srgb,var(--live) 28%,var(--line)); background:linear-gradient(90deg,color-mix(in srgb,var(--live) 7%,var(--panel)),var(--panel)); }
.studio-privacy-link:hover { border-color:var(--line-strong); background:color-mix(in srgb,var(--violet) 8%,var(--panel)); }
.studio-privacy-link strong { display:block; color:var(--ink); font-size:10px; }
.studio-preview-note { margin:10px 2px 0; color:var(--ink-3); font-size:9px; line-height:1.45; }
.studio-workbench { position:relative; overflow:hidden; border:0; border-top:1px solid var(--line-strong); border-radius:0; background:transparent; box-shadow:none; }
.studio-identity-workbench > .btn { min-height:44px; }
.studio-workbench::before { content:""; position:absolute; left:0; top:-1px; width:110px; height:2px; background:linear-gradient(90deg,var(--violet-lo),transparent); }
.studio-workbench-head { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:start; gap:12px; margin-bottom:17px; }
.studio-workbench-head > span { color:var(--live); font:600 9px var(--mono); letter-spacing:.12em; }
.studio-workbench-head h2 { margin:0; font-size:clamp(20px,2.5vw,29px); }
.studio-workbench-head em { max-width:150px; padding-top:5px; color:var(--ink-3); font:600 7px var(--mono); font-style:normal; letter-spacing:.09em; text-align:right; text-transform:uppercase; }
.field-optional { margin-left:5px; color:var(--ink-3); font:600 7px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.room-layout-form { margin:24px 0 31px; padding:20px; border:1px solid var(--line); border-radius:3px 20px 3px 3px; background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 6%,var(--panel)),var(--panel)); }
.room-layout-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.room-layout-heading .showcase-subhead { margin:0; color:var(--ink); }
.room-layout-heading > span { color:var(--ink-3); font:600 7px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.room-layout-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:16px; }
.room-layout-choice { position:relative; min-width:0; cursor:pointer; }
.room-layout-choice > input { position:absolute; width:1px; height:1px; opacity:0; }
.room-layout-plate { display:grid; grid-template-rows:106px auto auto; min-height:202px; padding:11px; border:1px solid var(--line); border-radius:3px 14px 3px 3px; background:color-mix(in srgb,var(--ground-0) 42%,transparent); transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast); }
.room-layout-choice:hover .room-layout-plate { border-color:var(--line-strong); transform:translateY(-2px); }
.room-layout-choice > input:focus-visible + .room-layout-plate { outline:2px solid var(--signal); outline-offset:3px; }
.room-layout-choice > input:checked + .room-layout-plate { border-color:color-mix(in srgb,var(--signal) 48%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--signal) 6%,var(--panel)),var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--signal) 9%,transparent); }
.room-layout-map { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(7px,auto); gap:3px; align-content:start; padding:8px; border:1px solid color-mix(in srgb,var(--ink) 7%,transparent); background:color-mix(in srgb,var(--ground-0) 64%,transparent); }
.room-layout-map i { min-width:0; display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--violet-lo) 27%,transparent); background:color-mix(in srgb,var(--violet) 10%,transparent); color:color-mix(in srgb,var(--violet-lo) 62%,transparent); font:600 9px var(--mono); font-style:normal; }
.room-layout-map i::after { line-height:1; }
.room-layout-map .room-map-current_chase::after { content:"◎"; }
.room-layout-map .room-map-showcase::after { content:"▦"; }
.room-layout-map .room-map-binders::after { content:"▤"; }
.room-layout-map .room-map-accomplishments::after { content:"✦"; }
.room-layout-map .room-map-network::after { content:"◇"; }
.room-layout-map .room-map-activity::after { content:"⌁"; }
.room-layout-map .room-map-current_chase,.room-layout-map .room-map-showcase { grid-column:1/-1; }
.room-layout-map .room-map-current_chase { min-height:12px; border-color:color-mix(in srgb,var(--signal) 38%,transparent); background:color-mix(in srgb,var(--signal) 9%,transparent); }
.room-layout-map .room-map-showcase { min-height:20px; background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--violet) 12%,transparent) 0 15%,transparent 15% 17%); }
.room-layout-map .room-map-binders { grid-column:span 4; min-height:27px; border-radius:7px 1px 1px 1px; }
.room-layout-map .room-map-accomplishments { grid-column:span 2; min-height:27px; border-radius:1px 1px 7px 1px; }
.room-layout-map .room-map-network { grid-column:span 2; min-height:12px; }
.room-layout-map .room-map-activity { grid-column:span 4; min-height:12px; }
.room-layout-copy { display:block; padding-top:10px; }
.room-layout-copy strong,.room-layout-copy small { display:block; }
.room-layout-copy strong { color:var(--ink); }
.room-layout-copy small { margin-top:5px; color:var(--ink-3); line-height:1.4; }
.room-layout-state { min-height:10px; align-self:end; margin-top:10px; color:var(--ink-3); font:600 7px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.room-layout-choice > input:checked + .room-layout-plate .room-layout-state { color:var(--signal); }
.room-layout-save { display:flex; align-items:center; justify-content:flex-end; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.room-layout-save .btn { flex:none; margin:0; }
.room-layout-save .btn:disabled { border-color:var(--line); background:var(--panel); box-shadow:none; color:var(--ink-3); cursor:default; }
.studio-room-contents { padding-top:4px; }
.studio-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:17px; }
.studio-slots div { min-height:124px; display:flex; flex-direction:column; justify-content:end; padding:13px; border:1px solid var(--line); border-radius:3px 15px 3px 3px; background:linear-gradient(145deg,color-mix(in srgb,var(--violet) 4%,var(--panel)),var(--panel)); }
.studio-slots div > span { width:36px; height:36px; margin-bottom:auto; border:1px dashed color-mix(in srgb,var(--violet-lo) 42%,transparent); border-radius:40% 55% 45% 52%; background:color-mix(in srgb,var(--violet) 5%,transparent); }
.studio-slots strong { color:var(--ink-2); font-size:10.5px; }

/* The public room deliberately changes silhouette by job. A card table, a
   binder plinth, a trophy cabinet and utility bands should not all read as the
   same dashboard component with different copy. */
.profile-card-showcase { border-inline:0; border-radius:0; box-shadow:none; background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--violet) 10%,transparent),transparent 48%),repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),color-mix(in srgb,var(--ink) 2%,transparent) calc(16.666% - 1px) 16.666%); }
.profile-binder-exhibit { border-radius:26px 3px 3px 3px; border-color:color-mix(in srgb,var(--binder-accent) 30%,var(--profile-edge)); box-shadow:0 28px 65px color-mix(in srgb,var(--ground-0) 52%,transparent); }
.profile-trophy-signal { border-radius:3px 3px 26px 3px; background:radial-gradient(circle at 50% 39%,color-mix(in srgb,var(--violet) 10%,transparent),transparent 44%),linear-gradient(160deg,color-mix(in srgb,var(--panel) 96%,var(--violet)),var(--panel)); }
.profile-network-signal,.profile-activity-signal { border-width:1px 0 0; border-radius:0; background:transparent; box-shadow:none; }
.profile-network-signal::before,.profile-activity-signal::before { display:none; }
.profile-broadcast-grid:not(:has(.profile-binder-exhibit)) .profile-trophy-signal,
.profile-broadcast-grid:not(:has(.profile-trophy-signal)) .profile-binder-exhibit,
.profile-broadcast-grid:not(:has(.profile-network-signal)) .profile-activity-signal,
.profile-broadcast-grid:not(:has(.profile-activity-signal)) .profile-network-signal { grid-column:1/-1; }

/* Progressive cross-document continuity. Supporting browsers carry the
   calling card between Room and Studio; every other browser gets ordinary,
   fully functional navigation. */
.profile-view .profile-hero,.profile-studio-view .studio-preview-card { view-transition-name:collector-calling-card; }
::view-transition-group(collector-calling-card) { animation-timing-function:var(--ease-out); }

/* ─────────────────────────────────────────────────────────────── settings */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--glass-edge); margin-bottom: 22px;
}
.tab {
  padding: 9px 14px; font-size: 13.5px; color: var(--ink-3);
  text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--ink); border-bottom-color: var(--violet); }

.sect { padding: 22px 24px; margin-bottom: 20px; }
.sect h2 { margin-top: 0; font-size: 16px; }
.sect .btn, .sect .btn-secondary, .sect .btn-danger { margin-top: 16px; }

.note.good { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.09);
             color: #86EFAC; }
.note.bad  { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08);
             color: #FCA5A5; }

/* A picker that shows what it is picking, rather than a select full of names.
   Locked rows are shown rather than hidden: seeing what a subscription buys is
   the point, and hiding them would only make the free picker look sparse. */
.pickrow { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 7px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; width: 76px;
}
.pick.wide { width: 108px; }
.pick.wide .banner-obj { width: 92px; height: 40px; border-radius: 6px;
                         border: 1px solid var(--glass-edge); }
.pick:hover { border-color: var(--glass-edge); }
.pick:has(input:checked) { border-color: rgba(155,93,229,.55); background: var(--violet-dim); }
.pick input { accent-color: var(--violet); }
.pick.locked { opacity: .55; cursor: not-allowed; }
.pickname { font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.2; }

.showcase-settings-head,.showcase-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.showcase-settings-head h2 { margin-bottom: 0; }
.showcase-subhead { margin: 25px 0 5px; color: var(--ink-2); font-size: 13px; }
.collecting-lanes-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 25px; }
.collecting-lanes-head .showcase-subhead { margin-top: 0; font-size: 15px; }
.lane-meter { flex: none; color: var(--ink-3); font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.lane-meter b { color: var(--live); font-size: 12px; }
.lane-starters { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 12px; }
.lane-starters button,.lane-add {
  border: 1px solid rgba(195,152,240,.18); border-radius: 999px;
  background: rgba(155,93,229,.055); color: var(--ink-3); font: 500 9px var(--font);
  padding: 7px 10px; cursor: pointer; transition: color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.lane-starters button:hover,.lane-add:hover { color: var(--ink); border-color: rgba(195,152,240,.42); background: rgba(155,93,229,.11); }
.interest-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 11px; }
.interest-editor-row {
  position: relative; display: grid; grid-template-columns: 28px 102px minmax(0,1fr) 26px;
  align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(244,239,250,.07);
  border-radius: 10px; background: rgba(14,7,20,.25);
}
.interest-editor-row.lane-hidden { display: none; }
.lane-number { color: rgba(195,152,240,.48); font: 500 8px var(--mono); text-align: center; }
.interest-editor-row select {
  width: 100%; background: var(--ground-0); border: 1px solid var(--glass-edge);
  border-radius: 8px; color: var(--ink-2); font-family: var(--font); font-size: 12px; padding: 8px;
}
.interest-editor-row .finput { margin: 0; }
.lane-remove {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); font-size: 17px; cursor: pointer;
}
.lane-remove:hover { background: rgba(248,113,113,.10); color: #fca5a5; }
.lane-add { display: block; margin-top: 10px; border-style: dashed; border-radius: 9px; }
.lane-add span { color: var(--live); margin-right: 5px; }
.showcase-note { margin: 10px 0 0; }
.showcase-card-heading { align-items: end; margin-top: 24px; }
.showcase-card-heading .showcase-subhead { margin-top: 0; }
.showcase-title-line { display: flex; align-items: center; gap: 8px; }
.context-help {
  position: relative; display: grid; flex: none; width: 18px; height: 18px; padding: 0;
  place-items: center; border: 1px solid rgba(195,152,240,.28); border-radius: 50%;
  background: rgba(155,93,229,.07); color: var(--ink-3); font: 650 9px var(--mono);
  cursor: help;
}
.context-help:hover,.context-help:focus-visible { color: var(--live); border-color: rgba(94,231,247,.42); outline: 0; }
.context-help [role="tooltip"] {
  visibility: hidden; position: absolute; z-index: 12; left: 50%; bottom: calc(100% + 10px);
  width: min(285px,70vw); padding: 10px 12px; border: 1px solid rgba(195,152,240,.25);
  border-radius: 9px; background: rgba(15,8,24,.97); box-shadow: 0 14px 35px rgba(0,0,0,.38);
  color: var(--ink-2); font: 500 10px/1.45 var(--font); text-align: left;
  transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.context-help:hover [role="tooltip"],.context-help:focus-visible [role="tooltip"] {
  visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0);
}
.showcase-count { flex: none; color: var(--violet-lo); font: 600 10px var(--mono); }
.showcase-curator {
  overflow: hidden; margin-top: 13px; border: 1px solid rgba(195,152,240,.16);
  border-radius: 15px; background: linear-gradient(160deg,rgba(155,93,229,.055),rgba(14,7,20,.35) 42%);
}
.showcase-selected {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px;
  min-height: 196px; padding: 17px; border-bottom: 1px solid rgba(244,239,250,.075);
  background: radial-gradient(circle at 50% 110%,rgba(155,93,229,.11),transparent 55%);
}
.showcase-card-choice {
  position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr);
  grid-template-rows: auto 1fr; gap: 7px 10px; min-width: 0; min-height: 135px;
  padding: 8px; border: 1px solid rgba(244,239,250,.08); border-radius: 9px;
  background: rgba(8,5,13,.36);
}
.showcase-selected .showcase-card-thumb {
  display: block; grid-row: 1 / 3; overflow: hidden; width: 76px; aspect-ratio: 2.5 / 3.5;
  border: 1px solid rgba(244,239,250,.13); border-radius: 7px; background: var(--ground-0);
  box-shadow: 0 13px 25px rgba(0,0,0,.22);
}
.showcase-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-card-copy { min-width: 0; }
.showcase-card-copy strong,.showcase-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.showcase-selected .showcase-card-copy { padding: 4px 28px 0 0; }
.showcase-card-copy strong { color: var(--ink-2); font-size: 9.5px; white-space: nowrap; }
.showcase-card-copy small { margin-top: 3px; color: var(--ink-3); font-size: 8px; line-height: 1.35; }
.showcase-pick-order {
  display: grid; position: absolute; z-index: 2; top: 6px; left: 6px; width: 19px; height: 19px;
  place-items: center; border-radius: 5px; background: rgba(8,5,13,.82); color: var(--live);
  font: 700 8px var(--mono);
}
.showcase-remove {
  position: absolute; z-index: 2; top: 5px; right: 5px; width: 21px; height: 21px;
  padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  background: rgba(8,5,13,.82); color: var(--ink-2); cursor: pointer;
}
.showcase-remove:hover { color: #fca5a5; border-color: rgba(248,113,113,.45); }
.showcase-note-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; align-self: end; }
.showcase-note-field > span { color: rgba(111,233,247,.56); font: 600 6.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.showcase-note-field textarea {
  width: 100%; min-height: 58px; resize: vertical; padding: 7px 8px;
  border: 1px solid rgba(195,152,240,.17); border-radius: 6px; outline: 0;
  background: rgba(8,5,13,.62); color: var(--ink-2); font: 9px/1.4 var(--font);
}
.showcase-note-field textarea:focus { border-color: rgba(111,233,247,.38); box-shadow: 0 0 0 3px rgba(111,233,247,.04); }
.showcase-note-field textarea::placeholder { color: rgba(244,239,250,.24); }
.showcase-empty-slot {
  display: flex; flex-direction: column; min-width: 0; min-height: 135px;
  border: 1px dashed rgba(195,152,240,.16); border-radius: 7px;
  background: linear-gradient(145deg,rgba(155,93,229,.025),rgba(14,7,20,.25));
}
.showcase-empty-slot span { padding: 8px; color: rgba(195,152,240,.28); font: 500 8px var(--mono); }
.showcase-empty-slot i { width: 20px; height: 27px; margin: auto; border: 1px solid rgba(195,152,240,.15); border-radius: 3px; box-shadow: 4px 3px 0 -1px rgba(155,93,229,.08); }
.showcase-library { padding: 16px; }
.showcase-search-box {
  display: grid; grid-template-columns: 19px minmax(0,1fr) auto; gap: 9px; align-items: center;
  padding: 9px 11px; border: 1px solid rgba(195,152,240,.24); border-radius: 10px;
  background: rgba(8,5,13,.57); box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.showcase-search-box:focus-within { border-color: rgba(94,231,247,.42); box-shadow: 0 0 0 3px rgba(94,231,247,.05); }
.showcase-search-box svg { width: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.showcase-search-box input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 12px var(--font); }
.showcase-search-box kbd { padding: 2px 6px; border: 1px solid var(--glass-edge); border-radius: 5px; color: var(--ink-3); background: rgba(255,255,255,.03); font: 8px var(--mono); }
.showcase-search-caption { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px 10px; color: var(--ink-3); font: 8px var(--mono); letter-spacing: .045em; }
.showcase-search-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; max-height: 310px; overflow-y: auto; scrollbar-color: rgba(195,152,240,.3) transparent; }
.showcase-search-result {
  display: grid; grid-template-columns: 37px minmax(0,1fr) auto; gap: 8px; align-items: center;
  min-width: 0; padding: 7px; border: 1px solid rgba(244,239,250,.075); border-radius: 8px;
  background: rgba(14,7,20,.30); color: inherit; text-align: left; cursor: pointer;
}
.showcase-search-result:hover { border-color: rgba(195,152,240,.32); background: rgba(155,93,229,.07); }
.showcase-suggestion {
  position: relative; overflow: hidden; grid-template-columns: 48px minmax(0,1fr) auto;
  min-height: 70px; background: linear-gradient(125deg,rgba(155,93,229,.075),rgba(14,7,20,.32) 55%);
  transition: transform var(--t-fast) var(--ease-out),border-color var(--t-fast),background var(--t-fast);
}
.showcase-suggestion:hover { transform: translateY(-2px); }
.showcase-search-result.showcase-suggestion .showcase-card-thumb { width: 48px; box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.showcase-suggestion::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(var(--live),var(--violet)); opacity: .55;
}
.showcase-search-result:disabled { opacity: .47; cursor: default; }
.showcase-search-result .showcase-card-thumb { display: block; overflow: hidden; width: 37px; aspect-ratio: 2.5 / 3.5; border-radius: 4px; }
.result-add { color: var(--live); font: 600 7.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.showcase-search-idle,.showcase-search-empty { grid-column: 1 / -1; min-height: 105px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--ink-3); }
.showcase-search-idle strong,.showcase-search-empty strong { color: var(--ink-2); font-size: 11px; }
.showcase-search-idle p,.showcase-search-empty p { max-width: 58ch; margin: 4px 0 0; font-size: 9.5px; line-height: 1.45; }
.curator-radar { position: relative; width: 30px; height: 30px; margin-bottom: 10px; border: 1px solid rgba(94,231,247,.22); border-radius: 50%; }
.curator-radar::before,.curator-radar::after { content: ""; position: absolute; background: rgba(94,231,247,.12); }
.curator-radar::before { width: 1px; inset: 4px auto 4px 50%; }
.curator-radar::after { height: 1px; inset: 50% 4px auto; }
.curator-radar i { position: absolute; width: 5px; height: 5px; right: 5px; top: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 9px var(--live); }

.vistable, .sesstable { width: 100%; border-collapse: collapse; margin: 14px 0 4px; }
.vistable th, .sesstable th {
  text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--glass-edge);
}
.vistable td, .sesstable td {
  padding: 12px 10px 12px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: top; font-size: 13px;
}
.vistable td:last-child { width: 150px; }
.vistable select, .sesstable select {
  width: 100%; background: var(--ground-0); border: 1px solid var(--glass-edge);
  border-radius: 8px; color: var(--ink); font-family: var(--font);
  font-size: 12.5px; padding: 7px 9px;
}
.sesstable tr.current td { color: var(--ink); }
.sesstable .mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.chip.live {
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: rgba(94,231,247,.13); color: var(--live); margin-left: 7px;
}

.check {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
}
.check input { margin-top: 3px; accent-color: var(--violet); flex: none; }
.check strong { display: block; font-size: 13.5px; font-weight: 600; }
.check em { display: block; font-style: normal; font-size: 12px;
            color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.check.disabled { opacity: .6; cursor: default; }

.sect.danger { border-color: rgba(248,113,113,.28); }
.sect.danger h2 { color: #FCA5A5; }
.btn-danger {
  background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.42);
  color: #FCA5A5; font-family: var(--font); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.btn-danger:hover { background: rgba(248,113,113,.24); }
.btn-danger:focus-visible { outline: 2px solid #F87171; outline-offset: 2px; }

@media (max-width: 640px) {
  .banner-in { flex-wrap: wrap; }
  .vistable td:last-child { width: 118px; }
}

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-rail { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-stats { grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); }
  .profile-featured-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-studio-layout { grid-template-columns: 1fr; grid-template-areas:"preview" "editor"; }
  .profile-studio-preview { position: static; }
  .studio-preview-card { max-width: none; }
  .showcase-selected { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .showcase-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .profile-view .wrap { width: min(100% - 24px,1280px); }
  .profile-hero { min-height: 300px; }
  .profile-hero-body { grid-template-columns: 78px 1fr; gap: 16px; padding: 28px 18px 22px; }
  .profile-avatar { width: 78px; outline-offset: 4px; }
  .profile-actions { grid-column: 1 / -1; align-self: auto; }
  .profile-actions .btn-secondary { display: block; text-align: center; }
  .profile-hero-foot { align-items: flex-start; flex-direction: column; gap: 9px; padding: 17px 18px; }
  .profile-since { white-space: normal; }
  .profile-layout,.profile-rail { gap: 13px; }
  .profile-rail { grid-template-columns: 1fr; }
  .profile-main-column > .profile-module { padding: 23px 0 27px; }
  .profile-main-column > .profile-module::before { top: 28px; }
  .profile-main-column > .profile-module:first-child { padding-top: 8px; }
  .profile-main-column > .profile-module:first-child::before { top: 13px; }
  .profile-main-column > .profile-card-showcase,
  .profile-main-column > #accomplishments { margin: 6px 0 18px; padding: 20px 17px 22px; }
  .profile-main-column > .profile-card-showcase::before,
  .profile-main-column > #accomplishments::before { top: 25px; left: 17px; }
  .profile-module-head { align-items: flex-start; }
  .profile-module-state { padding-top: 5px; }
  .trophy-preview { grid-template-columns: 1fr 1fr; }
  .trophy-slot.featured { grid-column: 1 / -1; }
  .interest-editor { grid-template-columns: 1fr; }
  .interest-editor-row { grid-template-columns: 24px 92px minmax(0,1fr) 26px; }
  .profile-studio-view .wrap { width: min(100% - 24px,1280px); }
  .profile-mode-dock { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .profile-mode-dock a { grid-template-columns:22px minmax(0,1fr); gap:8px; min-height:84px; padding:11px 10px; }
  .profile-mode-dock a:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .profile-mode-dock a:nth-child(2) { border-right:0; }
  .profile-mode-dock i { font-size:9.5px; }
  .profile-mode-dock strong { font-size:13px; }
  .profile-mode-dock small { overflow:visible; text-overflow:clip; white-space:normal; font-size:11px; line-height:1.35; }
  .profile-mode-dock em { display:none; }
  .studio-command { align-items:flex-start; flex-direction:column; gap:18px; padding-top:15px; }
  .studio-command h1 { font-size:38px; }
  .studio-command-actions { width:100%; justify-content:stretch; }
  .studio-command-actions .profile-action { flex:1 1 145px; }
  .studio-loadout-nav { display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
  .studio-loadout-nav a { flex:0 0 224px; min-height:76px; border-right:1px solid var(--line); scroll-snap-align:start; }
  .studio-loadout-nav a:last-child { border-right:1px solid var(--line); }
  .studio-preview-card { min-height:340px; }
  .studio-preview-identity { inset:auto 18px 51px; grid-template-columns:68px minmax(0,1fr); gap:15px; }
  .studio-preview-avatar { width:68px; }
  .studio-preview-copy h3 { font-size:27px; }
  .studio-equipped-strip { grid-template-columns:repeat(3,minmax(128px,1fr)); overflow-x:auto; }
  .studio-equipped-strip div { min-width:128px; }
  .studio-workbench { padding-inline:0; }
  .studio-workbench-head { grid-template-columns:25px minmax(0,1fr); }
  .studio-workbench-head em { grid-column:2; max-width:none; padding:0; text-align:left; }
  .profile-studio-editor :is(input,select,textarea) { font-size:16px; }
  .profile-studio-editor :is(.pick,.lane-starters button,.lane-add,.lane-remove) { min-height:44px; }
  .room-layout-form { margin-inline:0; padding:16px 12px; }
  .room-layout-heading { align-items:start; flex-direction:column; gap:7px; }
  .room-layout-presets { display:flex; overflow-x:auto; margin-inline:-12px; padding:2px 12px 10px; scroll-snap-type:x mandatory; }
  .room-layout-choice { flex:0 0 min(82%,290px); scroll-snap-align:start; }
  .room-layout-save { align-items:stretch; flex-direction:column; }
  .room-layout-save .btn { width:100%; min-height:44px; }
  .studio-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .showcase-selected { grid-template-columns: 1fr; }
  .showcase-search-results { grid-template-columns: 1fr; }
  .collecting-lanes-head { align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .profile-featured-card:nth-child(2n):hover .profile-featured-art { transform: translateY(-4px) rotate(.35deg); }
  .profile-featured-card:nth-child(2n+1):hover .profile-featured-art { transform: translateY(-4px) rotate(-.35deg); }
}

@media (max-width: 900px) {
  .profile-hero-body { grid-template-columns: minmax(0,1fr) auto; }
  .profile-identity-lockup { grid-column: 1/-1; }
  .profile-hero-signal { grid-column: 1/2; }
  .profile-binder-exhibit { grid-column: 1/-1; }
  .current-chase-card { grid-template-columns: minmax(0,1fr) minmax(145px,.48fr); }
  .current-chase-copy { grid-column: 1 / -1; border-bottom: 1px solid var(--profile-edge); }
  .current-chase-progress { border-left: 0; }
  .current-chase-open { position: absolute; right: 0; top: 0; bottom: 0; }
  .current-chase-route { padding-right: 82px; }
  .profile-trophy-signal { grid-column: span 5; }
  .profile-network-signal { grid-column: span 7; }
  .profile-activity-signal { grid-column: 1/-1; }
}

@media (max-width: 640px) {
  .profile-hero { min-height: 0; }
  .profile-preview-ribbon { grid-template-columns: 34px minmax(0,1fr); padding: 12px; }
  .profile-preview-ribbon::after { display: none; }
  .preview-radar { width: 31px; height: 31px; }
  .profile-preview-actions { grid-column: 1/-1; padding-top: 1px; }
  .profile-preview-actions a { flex: 1; text-align: center; }
  .profile-accession { display: none; }
  .profile-hero-top { padding: 16px 18px 16px 28px; }
  .profile-hero-body { grid-template-columns: 1fr; gap: 19px; padding: 31px 18px 25px; }
  .profile-identity-lockup { grid-column: auto; gap: 12px; }
  .profile-avatar { width: 64px; }
  .profile-identity h1 { font-size: clamp(27px,7.7vw,34px); line-height: .98; }
  .profile-handle { flex-wrap: wrap; font-size: 11px; }
  .profile-hero-signal,.profile-actions { grid-column: auto; }
  .profile-hero-signal { min-height: 0; }
  .profile-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .profile-action { min-width: 0; padding-inline: 9px; }
  .profile-actions > :only-child { grid-column: 1 / -1; }
  .profile-hero-foot { padding: 16px 18px; }
  .profile-room-nav { padding-left: 4px; }
  .room-nav-label { display: none; }
  .profile-room-nav a { padding-inline: 10px; }
  .profile-telemetry,.profile-lane-rail { grid-template-columns: 1fr; }
  .telemetry-lead,.lane-rail-label { min-height: 59px; padding-left: 2px; border-right: 0; border-bottom: 1px solid var(--profile-edge); }
  .telemetry-lead.has-portfolio-entry { min-height: 104px; }
  .profile-portfolio-entry { min-height: 44px; margin-top: 2px; }
  .profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-stats .stat,.profile-stats .stat:first-child { padding: 13px 11px; border-left: 1px solid var(--profile-edge); border-bottom: 1px solid var(--profile-edge); }
  .profile-stats .stat:nth-child(odd) { border-left: 0; }
  .profile-lane-rail .profile-interest-list { margin-inline: -12px; padding-inline: 12px; }
  .lane-empty { min-height: 58px; border-left: 0; }
  .profile-broadcast-grid { gap: 12px; }
  .signal-panel { padding: 21px 17px; }
  .signal-panel .profile-module-head { gap: 9px; }
  .signal-panel .profile-module-state { font-size: 9px; white-space: nowrap; }
  .profile-card-showcase { grid-column: 1/-1; padding: 21px 17px 25px; }
  .current-chase-card { grid-template-columns: 1fr; }
  .current-chase-copy,.current-chase-progress,.current-chase-route { padding: 18px; }
  .current-chase-progress,.current-chase-route { border-left: 0; border-top: 1px solid var(--profile-edge); }
  .current-chase-route { padding-right: 68px; }
  .current-chase-open { min-width: 52px; }
  .profile-featured-grid,.showcase-empty-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-featured-copy strong { font-size: 9px; }
  .profile-featured-copy small { font-size: 7px; }
  .profile-binder-exhibit { min-height: 520px; }
  .profile-binder-stage { grid-template-columns:132px minmax(0,1fr); gap:16px; min-height:360px; padding-top:15px; }
  .profile-binder-object { min-height:220px; }
  .profile-binder-cover { width:128px; }
  .profile-binder-story { padding:16px 0 16px 16px; }
  .profile-binder-story dl { grid-template-columns:1fr; }
  .profile-binder-story dl div,.profile-binder-story dl div:first-child { display:flex; justify-content:space-between; padding:9px 0; border-left:0; border-top:1px solid var(--profile-edge); }
  .profile-binder-story dl div:first-child { border-top:0; }
  .profile-binder-story dd { margin:0; }
  .profile-binder-actions { display:grid; }
  .binder-index { margin: 13px -17px -21px; }
  .profile-trophy-signal,.profile-network-signal,.profile-activity-signal { grid-column: 1/-1; min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-binder-cover,.profile-featured-art,.room-layout-plate { transition: none; }
  .profile-binder-object:hover .profile-binder-cover { transform: rotateY(10deg) rotateZ(-2deg); }
  .room-layout-choice:hover .room-layout-plate { transform:none; }
  ::view-transition-group(collector-calling-card) { animation:none; }
}
/* Collecting feedback stays beside the action, with usable recovery controls. */
.collecting-feedback { margin:12px 0 0; padding:12px; border:1px solid var(--line); border-radius:var(--r-control); background:var(--panel); color:var(--ink); font:14px/1.5 var(--font); overflow-wrap:anywhere; }
.collecting-feedback[hidden] { display:none; }
.collecting-feedback a,.collecting-feedback button { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:8px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-control); font:600 14px/1.4 var(--font); text-align:center; text-decoration:none; color:var(--violet-ink); background:var(--raised); cursor:pointer; }
.collecting-feedback button:disabled { opacity:.55; cursor:default; }
.collecting-feedback small { display:block; margin-top:8px; font-size:12px; color:var(--ink-2); }
.collecting-feedback[data-state="saved"] { border-color:var(--violet-ink); }
.collecting-feedback:focus-visible { outline:2px solid var(--violet-ink); outline-offset:3px; }
/* Forced colours remove background fills and shadows. Keep the current route
   distinguishable, while keyboard focus retains its separate outer ring. */
@media (forced-colors: active) {
  :is(.mobile-primary,.collection-workspace-nav,.navprimary) > [aria-current="page"] {
    outline:2px solid Highlight; outline-offset:-3px;
    text-decoration:underline; text-underline-offset:3px;
  }
  :is(.mobile-primary,.collection-workspace-nav,.navprimary) > [aria-current="page"]:focus-visible {
    outline-offset:3px;
  }
  .mobile-primary > a[aria-current="page"]::after { display:none; }
}