/* ==========================================================================
   Auto-Mastering: the interface.

   Frosted panels floating over coloured light. Depth without imitation: the
   surfaces are translucent and lit from behind, the radii are large, and the
   only saturated colour on the page is the gold on the one thing you can act
   on. Everything else is a step of grey.

   The wordmark is the one from soundproacademy.com, to the letter: Inter 600
   at 0.8rem with 0.28em of tracking, uppercase, pure white. It is a logo, so
   it is copied rather than interpreted.

   Everything below is built from the tokens in :root. No component carries a
   hex value or a one-off pixel size.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- the field, and the glass on top of it ---- */
  --void:     #07080c;
  --glass:    rgba(255, 255, 255, 0.045);
  --glass-2:  rgba(255, 255, 255, 0.07);
  --glass-3:  rgba(255, 255, 255, 0.10);
  --edge:     rgba(255, 255, 255, 0.10);
  --edge-hi:  rgba(255, 255, 255, 0.20);
  --well:     rgba(0, 0, 0, 0.26);

  /* ---- text ---- */
  --text:     #eef0f4;                      /* 17.4:1 on the field */
  --text-2:   rgba(238, 240, 244, 0.72);    /*  9.4:1 */
  --text-3:   rgba(238, 240, 244, 0.46);    /*  4.9:1, labels and hints only */
  --on-gold:  #1a1405;

  /* ---- one accent, on the one thing you can act on ---- */
  --gold:      #f0b429;
  --gold-2:    #ffd071;
  --gold-soft: rgba(240, 180, 41, 0.12);
  --gold-ring: rgba(240, 180, 41, 0.42);

  /* ---- status. Never colour alone: each one is paired with a word ---- */
  --mint:        #55e3b0;
  --violet:      #8b7bff;
  --danger:      #ff6b63;
  --danger-soft: rgba(255, 107, 99, 0.12);

  /* ---- the three waveform lanes ---- */
  --lane-mix:    rgba(238, 240, 244, 0.32);
  --lane-master: #f0b429;
  --lane-ref:    rgba(85, 227, 176, 0.72);

  /* ---- type ---- */
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs: 0.72rem; --t-sm: 0.8rem; --t-base: 0.92rem; --t-md: 1rem;
  --t-lg: 1.2rem;  --t-xl: 1.6rem;  --t-2xl: 2.2rem;

  /* ---- space, on a 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- radius. Large on the glass, smaller inside it ---- */
  --r-card: 26px;
  --r-md:   16px;
  --r-sm:   10px;
  --r-xs:   8px;
  --r-full: 999px;

  --e-1: 0 1px 0 rgba(255, 255, 255, 0.09) inset;
  --e-2: 0 30px 70px rgba(0, 0, 0, 0.5);
  --e-gold: 0 10px 30px rgba(240, 180, 41, 0.28);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text-2);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--gold-soft); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }

/* Every live figure uses these, so a changing number never moves the layout. */
.fader__value, table.metrics td, .deck__time, .pill, .insight__figure,
.progress__clock, .tile__value, .compare-row__v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------- aurora -- */

/* Three soft lights behind everything. Absolute rather than fixed: a fixed
   blurred layer repaints the whole document on every scroll tick, and this
   page is already running a waveform and an audio graph. */
.aurora {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1500px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora i { position: absolute; border-radius: 50%; filter: blur(120px); }
.aurora i:nth-child(1) { width: 720px; height: 560px; top: -220px; left: -120px; background: #3a2d6b; opacity: 0.55; }
.aurora i:nth-child(2) { width: 640px; height: 520px; top: -160px; right: -140px; background: #7a5a12; opacity: 0.45; }
.aurora i:nth-child(3) { width: 820px; height: 520px; top: 800px;  left: 22%;    background: #124a44; opacity: 0.4; }

/* ---------------------------------------------------------------- shell -- */

/* Two columns: the list of masters on the left, the one you are working on to
   the right. The sidebar owns its own scroll so the history stays put while a
   long master is scrolled through. */
.app {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--dur-3) var(--ease);
}

/* Folded: the column narrows to a rail rather than closing. The rail keeps the
   toggle and New master where the panel they open will appear, so the history
   always has a visible handle. The main column is pinned to the second track so
   the page stays put when the list is lifted out of the grid as a drawer. */
.app { --rail: 60px; }
.app--folded { grid-template-columns: var(--rail) minmax(0, 1fr); }
.main { position: relative; min-width: 0; grid-column: 2; }

/* The glass file's shell, to the pixel: 1140px wide with a 4vw gutter. */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 4vw 110px;
}

/* -------------------------------------------------------------- sidebar -- */

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: padding var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  height: 100vh;
  /* The column decides the width; this keeps the contents inside it. A grid
     item defaults to min-width:auto, which is its content, and that alone is
     enough to hold a zero-width column open. */
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: rgba(10, 11, 16, 0.72);
  border-right: 1px solid var(--edge);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.sidebar > * { flex: 0 0 auto; width: 254px; }
.sidebar > .sidebar__list { flex: 1 1 auto; }
.sidebar__top { display: flex; align-items: center; gap: var(--s-3); }
/* The wordmark is in the top bar now, where both mockups set it, so the rail
   is headed by what it holds rather than by the same name a second time. */
.sidebar__top .sidebar__section { flex: 1 1 auto; }

.sidebar__new { width: 100%; }

/* The rail. Everything but the toggle and New master steps out, and New master
   becomes a square icon button beneath the toggle. */
.app--folded .sidebar:not(.open) {
  padding: var(--s-5) 11px;
  gap: var(--s-3);
  align-items: center;
}
.app--folded .sidebar:not(.open) > * { width: auto; }
.app--folded .sidebar:not(.open) .sidebar__section,
.app--folded .sidebar:not(.open) .sidebar__label,
.app--folded .sidebar:not(.open) .sidebar__list,
.app--folded .sidebar:not(.open) .sidebar__foot { display: none; }
.app--folded .sidebar:not(.open) .sidebar__new {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.sidebar__section {
  padding: 0 var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.sidebar__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 calc(var(--s-2) * -1);
  padding: 0 var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* One master. The whole row is the target, and the remove button only appears
   under a pointer, the way a chat list behaves. */
.entry {
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  padding: var(--s-3) calc(var(--s-3) + 22px) var(--s-3) var(--s-3);
  cursor: pointer;
}
@media (hover: hover) {
  .entry:hover { background: var(--glass-2); transform: none; box-shadow: none; }
}
.entry.on { background: var(--glass-2); border-color: var(--edge); }
.entry__name {
  display: block;
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry.on .entry__name { color: var(--gold); }
.entry__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry__kill {
  position: absolute;
  top: 50%;
  right: var(--s-2);
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--r-xs);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-3);
  opacity: 0;
  font-size: var(--t-sm);
  line-height: 1;
}
.entry:hover .entry__kill, .entry__kill:focus-visible { opacity: 1; }
@media (hover: hover) {
  .entry__kill:hover { background: var(--glass-3); color: var(--text); transform: translateY(-50%); box-shadow: none; }
}

.sidebar__empty {
  padding: var(--s-4) var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-3);
}

.sidebar__foot {
  border-top: 1px solid var(--edge);
  padding-top: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.sidebar__account { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2); }
.sidebar__avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--glass-3);
  border: 1px solid var(--edge);
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-size: var(--t-xs);
  font-weight: 600;
}
.sidebar__who { min-width: 0; }
.sidebar__who b { display: block; color: var(--text); font-size: var(--t-sm); }
.sidebar__who span { display: block; font-size: var(--t-xs); color: var(--text-3); }
.sidebar__tools { display: flex; gap: var(--s-2); padding: 0 var(--s-2); }
.sidebar__tools button { flex: 1 1 0; }

.scrim { display: none; }

@media (max-width: 1080px) {
  /* Too narrow for the list beside the work, so the rail is all that sits in
     the column and the full list opens over the page. */
  .app, .app--folded { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .sidebar:not(.open) { padding: var(--s-5) 11px; gap: var(--s-3); align-items: center; }
  .sidebar:not(.open) > * { width: auto; }
  .sidebar:not(.open) .sidebar__section,
  .sidebar:not(.open) .sidebar__label,
  .sidebar:not(.open) .sidebar__list,
  .sidebar:not(.open) .sidebar__foot { display: none; }
  .sidebar:not(.open) .sidebar__new {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sidebar.open {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 286px;
    z-index: 60;
  }
  /* Dim only. The drawer over it is already a blurred layer, and stacking two
     backdrop filters is a lot of compositing for a scrim nobody looks at. */
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 8, 12, 0.66);
    z-index: 50;
  }
  .wrap { padding: 0 4vw var(--s-9); }
}

/* ---------------------------------------------------------------- topbar - */

/* The nav from the glass file. The bar itself spans the window so the blur
   reaches both edges; its contents sit on the same measure as the column
   below, which is what keeps the wordmark over the first panel's left edge. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 8, 12, 0.6);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--edge); backdrop-filter: blur(18px); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: nowrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 4vw 22px;
}

.topbar__left { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

/* The bar sits on the same measure as the work below it, and the bento
   arrangements are a wider measure than the stack one. */
.topbar--wide .topbar__inner { max-width: 1372px; padding: 26px 26px 22px; }

/* The wordmark, set exactly as soundproacademy.com sets it in its nav:
   Inter 600, 0.8rem, 0.28em, uppercase. The two should read as one brand, so
   the numbers are the site's rather than the mockups' Anton. It is never
   compressed or clipped: if the bar runs out of room the controls overhang the
   column's right edge, which reads as a wider bar rather than a broken logo. */
.topbar__brand {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar__brand span { color: var(--text-3); }

.iconbtn {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--r-sm);
  background: var(--glass-2);
  border: 1px solid var(--edge);
  box-shadow: none;
  color: var(--text-2);
}
@media (hover: hover) {
  .iconbtn:hover { background: var(--glass-3); border-color: var(--edge-hi); color: var(--text); box-shadow: none; }
}
.topbar__right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* Below the width where all of it fits on one line, the half of the wordmark
   that names the page steps back so the bar stays one line. */
@media (max-width: 900px) { .topbar__brand span { display: none; } }

/* ---------------------------------------------------------------- type --- */

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-3);
}

h1.display {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  max-width: 18ch;
}
h1.display em { font-style: normal; color: var(--gold); }

h2.head {
  font-size: var(--t-lg);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

h3.sub {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s-1);
  line-height: 1.3;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 52ch;
  margin: var(--s-4) 0 0;
}

.note { color: var(--text-3); font-size: var(--t-sm); line-height: 1.6; margin: 0; }
.copy { max-width: 64ch; }

b, strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- hero --- */

.hero { padding: var(--s-8) 0 var(--s-7); }

/* Once a track is loaded the glass file opens on two cards of equal width:
   what is being made on the left, the two files it is made from on the right. */
.herocards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.herocards > .panel { margin-bottom: 0; }
.hero__title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--text);
  font-weight: 600;
  margin: 0 0 14px;
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__sub { margin: 0; max-width: 40ch; font-size: var(--t-base); color: var(--text-2); }
.hero__change { margin-top: 18px; }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--edge);
}
.hero__fact { flex: 0 1 230px; font-size: var(--t-sm); }
.hero__fact b { display: block; color: var(--text); margin-bottom: 2px; }
.hero__fact span { color: var(--text-3); }

/* --------------------------------------------------------------- panels -- */

.panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: var(--e-1), var(--e-2);
  padding: 30px 32px;
  margin-bottom: 22px;
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.panel__head .note { max-width: 62ch; }
/* A title and at most a handful of words beside it. */
.panel__head--tight { align-items: center; margin-bottom: 22px; }
.panel__head--tight .note { font-size: var(--t-sm); text-align: right; }

.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.row > * { flex: 1 1 280px; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* -------------------------------------------------------------- buttons -- */

button {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border: 0;
  border-radius: var(--r-full);
  padding: 0.75rem 1.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  box-shadow: var(--e-gold);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
@media (hover: hover) {
  button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(240, 180, 41, 0.36); }
}
button:active:not(:disabled) { transform: scale(0.985); }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

button.hero-cta {
  padding: 20px 32px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-md);
  box-shadow: 0 16px 44px rgba(240, 180, 41, 0.3);
}

button.ghost {
  background: var(--glass-2);
  color: var(--text);
  border: 1px solid var(--edge);
  box-shadow: none;
}
@media (hover: hover) {
  button.ghost:hover:not(:disabled) { background: var(--glass-3); border-color: var(--edge-hi); box-shadow: none; }
}

button.quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  box-shadow: none;
  padding: 0.6rem 0.7rem;
}
@media (hover: hover) { button.quiet:hover:not(:disabled) { color: var(--text); transform: none; box-shadow: none; } }

button.small { padding: 0.5rem 1rem; font-size: var(--t-xs); }

/* ----------------------------------------------------------------- chips - */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.78rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  background: var(--glass);
  backdrop-filter: blur(14px);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.pill--gold { border-color: var(--gold-ring); color: var(--gold); }
.pill--live { border-color: var(--gold-ring); color: var(--gold); background: var(--gold-soft); }
.pill--offer { border-color: var(--gold-ring); color: var(--gold); padding-right: var(--s-3); }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); flex: 0 0 auto; }

/* ------------------------------------------------------------- upgrade --- */

.upgrade {
  display: inline-flex;
  align-items: center;
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-ring);
  border-radius: var(--r-full);
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .upgrade:hover { background: var(--gold-soft); border-color: var(--gold); transform: translateY(-1px); }
}
.upgrade:active { transform: scale(0.985); }
.upgrade__arrow { margin-left: 0.5em; }

.upgrade--solid {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-color: transparent;
  color: var(--on-gold);
  box-shadow: var(--e-gold);
}
@media (hover: hover) {
  .upgrade--solid:hover { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--on-gold); }
}
.upgrade--small { padding: 0.42rem 0.9rem; }
.upgrade--inline {
  border: 0;
  border-left: 1px solid var(--gold-ring);
  border-radius: 0;
  padding: 0 0 0 var(--s-2);
  margin-left: var(--s-2);
  font-size: 0.66rem;
}
@media (hover: hover) { .upgrade--inline:hover { background: transparent; color: var(--text); transform: none; } }

/* ------------------------------------------------------------ drop zones - */

.drops { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4); align-items: stretch; }
.drops__arrow {
  align-self: center;
  color: var(--text-3);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  min-height: 170px;
  border: 1px dashed var(--edge-hi);
  border-radius: var(--r-md);
  background: var(--glass-2);
  padding: var(--s-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
@media (hover: hover) { .drop:hover { border-color: var(--gold-ring); background: var(--glass-3); } }
.drop.over { border-color: var(--gold); background: var(--gold-soft); transform: scale(1.01); }
.drop.filled { border-style: solid; border-color: var(--edge); text-align: left; }
.drop.invalid { border-color: var(--danger); background: var(--danger-soft); }

.drop__role { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.drop.filled .drop__role { color: var(--gold); }
.drop__name { font-size: var(--t-md); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.drop__hint { color: var(--text-3); font-size: var(--t-sm); }
.drop__hint.bad { color: #ffb9b5; }
.drop__mark {
  width: 40px; height: 40px;
  margin: 0 auto var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: var(--glass-2);
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.drop__actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* --------------------------------------------------------------- waves --- */

.waves {
  position: relative;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}
.waves canvas { display: block; width: 100%; border-radius: 13px; }
.waves.grabbing, .waves.grabbing .waves__region { cursor: grabbing; }

.waves__lane-label {
  position: absolute;
  left: var(--s-3);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-full);
  background: rgba(7, 8, 12, 0.66);
  border: 1px solid var(--edge);
  backdrop-filter: blur(10px);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  pointer-events: none;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.waves__lane-label.on { color: var(--text); border-color: var(--edge-hi); }

/* The reference's label is also its handle: drag it to slide the reference
   against the mix, double click to line them up again. */
/* The lane labels are decoration and let clicks through to the lane beneath.
   The reference's is a control, so it takes the pointer back: without this the
   press lands on the waveform and starts a preview-window drag instead. */
.waves__lane-label--slide { pointer-events: auto; cursor: ew-resize; touch-action: none; }
@media (hover: hover) {
  .waves__lane-label--slide:hover { border-color: var(--gold-ring); color: var(--text); }
}
.waves__slide {
  font-family: var(--mono);
  font-size: 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--gold);
}
.waves__lane-label .key {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0;
  color: var(--text-3);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0 4px;
}
.waves__lane-label .swatch { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }

.waves__mask {
  position: absolute;
  top: 5px; bottom: 5px;
  background: rgba(7, 8, 12, 0.62);
  pointer-events: none;
  z-index: 2;
}
.waves__region {
  position: absolute;
  top: 5px; bottom: 5px;
  z-index: 3;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold-ring);
  background: rgba(240, 180, 41, 0.07);
  box-shadow: 0 0 40px rgba(240, 180, 41, 0.12) inset;
  cursor: grab;
}
/* The label sits at the bottom of the region, where no lane has a label of its
   own, on solid dark rather than floating gold-on-waveform. It says what the
   region is and that it moves, because a lit rectangle does not say either. */
.waves__tag {
  position: absolute;
  bottom: var(--s-2);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.28rem 0.7rem;
  background: rgba(7, 8, 12, 0.88);
  border: 1px solid var(--gold-ring);
  border-radius: var(--r-full);
  color: var(--gold);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.waves__tag svg { fill: currentColor; opacity: 0.75; flex: 0 0 auto; }

/* Grab bars on both edges, so the region reads as a thing you take hold of. */
.waves__grip {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 34px;
  margin-top: -17px;
  border-radius: var(--r-full);
  background: var(--gold);
  opacity: 0.85;
  pointer-events: none;
}
.waves__grip--left { left: -2px; }
.waves__grip--right { right: -2px; }

.waves__playhead {
  position: absolute;
  top: 5px; bottom: 5px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  will-change: transform;
  z-index: 4;
}

.ruler {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--text-3);
}

/* ------------------------------------------------------------ transport -- */

.deck { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.deck__play { width: 54px; height: 54px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
.deck__play svg { display: block; }
.deck__time { font-family: var(--mono); font-size: var(--t-sm); color: var(--text); }
.deck__time span { color: var(--text-3); }
.deck__spacer { flex: 1 1 auto; }

.sources {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--well);
  border: 1px solid var(--edge);
}
.sources button {
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-3);
  box-shadow: none;
  padding: 0.5rem 0.95rem;
  font-size: var(--t-xs);
  gap: var(--s-2);
}
.sources button.on { background: var(--glass-3); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset; }
.sources button:disabled { opacity: 0.35; }
@media (hover: hover) {
  .sources button:hover:not(:disabled):not(.on) { color: var(--text); transform: none; box-shadow: none; }
}
.sources .key {
  font-family: var(--mono);
  font-size: 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0 4px;
}

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; padding: var(--s-1) 0; }
.check input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.check__text b { display: block; font-size: var(--t-base); }
.check__text .note { margin-top: 2px; max-width: 72ch; }
.check__text .pill { margin-left: var(--s-2); }

/* --------------------------------------------------------------- faders -- */

.faders { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }

/* The bento file stacks them in one column and rules one off from the next,
   with no description under any of them. */
.faders--tight { grid-template-columns: 1fr; gap: 0; }
.faders--tight .fader { padding: 13px 0; border-bottom: 1px solid var(--edge); }
.faders--tight .fader:first-child { padding-top: 0; }
.faders--tight .fader:last-child { border-bottom: 0; padding-bottom: 0; }
.faders--tight .fader__head { margin-bottom: 9px; }

.fader { display: block; }
.fader__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fader__name { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-base); font-weight: 600; color: var(--text); }
.fader__step {
  width: 21px; height: 21px; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--gold-soft);
  border: 1px solid var(--gold-ring);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--gold);
}
.fader__value { font-family: var(--mono); font-size: var(--t-sm); color: var(--gold); }
.fader__value.at-default { color: var(--text-3); }
.fader__note { display: block; color: var(--text-3); font-size: var(--t-sm); margin: 2px 0 var(--s-2); line-height: 1.45; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  display: block;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 0 var(--gold-soft);
  transition: box-shadow var(--dur-1) var(--ease);
}
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 5px var(--gold-soft); }
input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 8px var(--gold-soft); }
input[type="range"]:disabled { cursor: not-allowed; opacity: 0.45; }

select {
  font: inherit;
  font-size: var(--t-base);
  width: 100%;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
}
label.field { display: block; }
label.field > span.label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
label.field .note { margin-top: var(--s-1); }

/* -------------------------------------------------- what Pro adds to it -- */

/* The glass file's promo: one wide bar, the words on the left and the way
   out of the limit on the right. Its heading is the bento file's, so it is
   not shown here; the kicker and the one paragraph are all this bar carries. */
.offer {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  flex-wrap: wrap;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 26px;
  background: linear-gradient(120deg, rgba(240, 180, 41, 0.16), rgba(139, 123, 255, 0.12));
  border: 1px solid rgba(240, 180, 41, 0.32);
}
.offer__text { max-width: 60ch; }
.offer .eyebrow { margin-bottom: 6px; }
.offer .sub { display: none; }
.offer p { margin: 0; font-size: var(--t-sm); color: var(--text-2); }

.compare { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.compare__switch { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--well); border: 1px solid var(--edge); flex: 0 0 auto; }
.compare__switch button,
.compare button {
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-3);
  box-shadow: none;
  padding: 0.5rem 1rem;
  font-size: var(--t-xs);
}
.compare__switch button.on,
.compare button.on { background: var(--glass-3); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset; }
@media (hover: hover) {
  .compare__switch button:hover:not(:disabled):not(.on),
  .compare button:hover:not(:disabled):not(.on) { color: var(--text); transform: none; box-shadow: none; }
}
.compare .note { flex: 1 1 260px; }

/* --------------------------------------------------------------- export -- */

/* The glass file: the button and what the file will be on the left, the
   finished numbers on the right, on a 1.1 / 1 split. */
.export { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
.export__main { min-width: 0; }
.export__what { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.export__side { min-width: 0; }

/* What the file will be, as chips rather than a table. Each limit carries
   the way out of it, divided off by a rule the way the mockup draws it. */
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.callout {
  border-left: 2px solid var(--gold);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
  max-width: 60ch;
}
.callout b { display: block; color: var(--text); }
.callout p { margin: var(--s-1) 0 0; }

/* ---------------------------------------------------------------- bento -- */

/* The arrangement from the bento file, twelve columns on a 14px gap inside a
   1320px shell: what is loaded beside the player, then the faders, the offer
   and the download across one row, then the finished numbers as four tiles,
   then the reading underneath. The surface stays the glass file's: the same
   frosted panels, the same aurora behind them, the same gold and radii. */
.wrap--bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  /* Tiles on a row are the same height, the way the file draws them: the
     offer's button falls to the bottom of its tile rather than floating. */
  align-items: stretch;
  /* The bento file is read at a glance, so it takes the window rather than a
     column: a 1320px shell on the 26px gutter the file sets, not the 4vw one
     the glass file uses to keep its column narrow enough to read. */
  max-width: 1372px;
  padding: 0 26px 110px;
}
.wrap--bento > .flow { display: contents; }
.wrap--bento > *,
.wrap--bento > .flow > * { grid-column: 1 / -1; }
.wrap--bento .panel { margin-bottom: 0; padding: 20px 22px; }
.wrap--bento .disclosure { margin-top: 0; }

/* Every tile is wrapped in a slot, and the slot is the grid item. The span is
   an inline style written by the arrangement, so there are no per-tile rules
   here. The slot is a grid of one so the panel inside fills its full height:
   that is what keeps a row flush instead of leaving the short tile floating
   with the page showing underneath it. */
.slot { position: relative; display: grid; min-width: 0; }
.slot > .panel { margin-bottom: 0; height: 100%; }

/* The numbers, across as many columns as the slot has room for. Counted from
   the slot's own width rather than left to auto-fit, which given five columns
   of room lays three out and drops the fourth onto a line of its own. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; height: 100%; }
.stats > .panel { margin-bottom: 0; }
.slot[data-span="2"] .stats,
.slot[data-span="3"] .stats,
.slot[data-span="4"] .stats { grid-template-columns: minmax(0, 1fr); }
.slot[data-span="9"] .stats,
.slot[data-span="10"] .stats,
.slot[data-span="11"] .stats,
.slot[data-span="12"] .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Every tile is headed by the bento file's small uppercase label rather than
   by a heading, and the hint beside it joins that label on the same line. */
.wrap--bento .panel__head {
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 12px;
}
.wrap--bento .panel__head h2.head,
.wrap--bento .panel__head .note {
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.wrap--bento .panel__head .note::before { content: "\00b7\00a0"; }
.wrap--bento .panel__head .compare__switch,
.wrap--bento .panel__head .help,
.wrap--bento .panel__head > button { margin-left: auto; }

/* The file pair: ruled rows with the kind named, as the bento file draws it. */
.wrap--bento .loaded { gap: 0; }
.wrap--bento .loaded__row {
  padding: 14px 0 0;
  margin-top: 14px;
  border: 0;
  border-top: 1px solid var(--edge);
  border-radius: 0;
  background: none;
}
.wrap--bento .loaded__row:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.wrap--bento .loaded__badge { width: 40px; height: 40px; border-radius: 13px; }
.wrap--bento .loaded__row:first-child .loaded__badge { background: var(--gold-soft); }
.wrap--bento .loaded__kind {
  display: block;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.wrap--bento .loaded__meta { margin-top: 2px; }

/* The offer is its own tile here, so the tile itself carries the gradient. */
.wrap--bento [data-block="offer"].panel {
  display: flex;
  background: linear-gradient(140deg, rgba(240, 180, 41, 0.16), rgba(157, 139, 255, 0.10));
  border-color: rgba(240, 180, 41, 0.3);
}
.wrap--bento [data-block="offer"] .offer {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1 auto;
}
.wrap--bento [data-block="offer"] .offer .sub { display: block; margin-bottom: 6px; }
.wrap--bento [data-block="offer"] .offer .eyebrow { margin-bottom: 8px; }
.wrap--bento [data-block="offer"] .offer .upgrade { align-self: flex-start; }

/* The download tile: one button across the width, then what the file will be. */
.wrap--bento [data-block="deliver"] .export { display: block; }
.wrap--bento [data-block="deliver"] .actions { display: grid; gap: var(--s-2); }
.wrap--bento [data-block="deliver"] .actions button {
  width: 100%;
  border-radius: 14px;
  padding: 17px 22px;
  font-size: var(--t-base);
}
.wrap--bento [data-block="deliver"] .terms { margin-top: 14px; }

/* The finished numbers, at the size the bento file sets them. */
.wrap--bento [data-block="stat"] .tile__value { font-size: 2.125rem; letter-spacing: -0.02em; }
.wrap--bento [data-block="stat"] .tile__value.waiting { color: var(--text-3); }

/* The reading underneath is a list here, not a wall of tiles. */
.wrap--bento .insight { grid-template-columns: 1fr; gap: 14px; }
.wrap--bento .insight__item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.wrap--bento .insight__figure { font-size: 15px; text-align: right; margin-bottom: 0; padding-top: 1px; }

@media (max-width: 1180px) {
  .wrap--bento .flow > [data-block] { grid-column: 1 / -1; }
  .wrap--bento .flow > [data-block="stat"] { grid-column: span 6; }
}

/* -------------------------------------------------------------- bento b -- */

/* A second cut of the grid, not one of the approved mockups.
 *
 * What moves and why: the two file names are the thing you look at least on
 * this screen, so they give up a tile and take a strip across the top. The
 * faders come up beside the player, which puts the whole instrument on one
 * row: you can see the waveform you are changing while you change it. The
 * offer and the download were both half empty, so the four finished numbers
 * move up into that row rather than sitting alone under it.
 *
 * Everything below the fold is unchanged. The surface is still the glass
 * file's, as it is in Bento.
 */
/* The faders are the tall tile on this row, so the player is given the same
   height and its waveform well takes whatever is left over: the lanes are
   drawn to fill it rather than leaving the bottom of the tile empty. The
   well's height comes from here, never from the canvas inside it, which is
   what keeps the measurement from chasing itself. See fillHeight. */
/* The faders are the tall tile on this row. The player is drawn with taller
   lanes so it comes close, and the transport sits at the bottom of the tile
   so whatever is left over falls in one place rather than under everything.
   The lane height is a number, not a measurement of this box: see waveform.js
   for what measuring it cost. */
.wrap--bento-b [data-block="player"] { display: flex; flex-direction: column; }
.wrap--bento-b [data-block="player"] .deck { margin-top: auto; }

/* The files along one line: the label, the two of them, then Change. */
.filesbar { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.filesbar__label {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: 0 0 auto;
}
.filesbar .loaded {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
}
.filesbar .loaded__row {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.filesbar .loaded__row + .loaded__row {
  padding-left: var(--s-5);
  border-left: 1px solid var(--edge);
}
.filesbar .loaded__badge { width: 32px; height: 32px; border-radius: var(--r-sm); }
.filesbar .loaded__meta { margin-top: 0; }
.wrap--bento-b [data-block="filesbar"].panel { padding: 14px 22px; }

/* ------------------------------------------------------------- arrange --- */

/* Moving the tiles about. The handle sits over the top of the tile rather
   than above it, so turning Arrange on does not change a single measurement
   of the thing you are arranging. */
.arrangebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--gold-ring);
  border-radius: var(--r-md);
  background: var(--gold-soft);
  font-size: var(--t-sm);
}
.arrangebar b { color: var(--gold); }
.arrangebar span { color: var(--text-2); }

button.arrange.on { background: var(--gold-soft); border-color: var(--gold-ring); color: var(--gold); }

.slot--arranging { cursor: grab; }
.slot--arranging:active { cursor: grabbing; }
/* The tile underneath is a picture while you are arranging: a drag must not
   land on a fader, and a fader must not swallow the drag. */
.slot--arranging > .panel,
.slot--arranging > .stats { pointer-events: none; user-select: none; }
.slot--arranging::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--gold-ring);
  border-radius: var(--r-card);
  pointer-events: none;
  z-index: 25;
}
.slot__bar {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 5px 6px 5px 10px;
  border-radius: var(--r-full);
  background: rgba(14, 16, 22, 0.94);
  border: 1px solid var(--gold-ring);
  font-size: var(--t-xs);
  color: var(--gold);
}
.slot__grip { opacity: 0.7; }
.slot__name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slot__span { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.slot__span b { font-family: var(--mono); color: var(--text); min-width: 2ch; text-align: center; }
.slot__span button {
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  background: var(--glass-2);
  border: 1px solid var(--edge);
  box-shadow: none;
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1;
}
@media (hover: hover) {
  .slot__span button:hover:not(:disabled) {
    background: var(--gold-soft); border-color: var(--gold-ring); color: var(--gold);
    transform: none; box-shadow: none;
  }
}

@media (max-width: 1180px) {
  .wrap--bento .slot { grid-column: 1 / -1 !important; }
}

/* The three arrangements, chosen from the top bar. */
.layouts { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--well); border: 1px solid var(--edge); }
.layouts button {
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-3);
  box-shadow: none;
  padding: 0.42rem 0.44rem;
  font-size: var(--t-xs);
  gap: var(--s-2);
}
.layouts button.on { background: var(--glass-3); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset; }
@media (hover: hover) {
  .layouts button:hover:not(.on) { color: var(--text); transform: none; box-shadow: none; }
}

/* ----------------------------------------------------------------- help -- */

/* One question mark, one explanation, and only while you are pointing at it.
   The note is always in the markup; what follows is the only thing that shows
   it. Clicking used to toggle it, which left every explanation you had read
   still sitting on the screen until you went back and closed it. */
.help { position: relative; display: inline-flex; }
.help__button {
  width: 16px; height: 16px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--edge-hi);
  box-shadow: none;
  color: var(--text-3);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.help:hover .help__button,
.help__button:focus-visible {
  background: var(--gold-soft);
  border-color: var(--gold-ring);
  color: var(--gold);
  transform: none;
  box-shadow: none;
}
.help__note {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: min(34ch, 70vw);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(14, 16, 22, 0.97);
  border: 1px solid var(--edge-hi);
  box-shadow: var(--e-2);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  /* Hidden rather than absent, so revealing it costs no re-render and the
     pointer never lands in the gap while React catches up. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), visibility var(--dur-1) var(--ease);
}
.help:hover .help__note,
.help__button:focus-visible + .help__note { opacity: 1; visibility: visible; }

/* A question mark at the right edge of a panel: a centred note would run off
   the window, so it hangs from the right instead. */
.help__note--right { left: auto; right: 0; transform: none; }
/* And one at the left edge of a narrow tile hangs from the left. */
.help__note--left { left: 0; transform: none; }

/* Every panel is its own stacking context, because backdrop-filter makes one.
   Without this the note is trapped inside its panel and the panel beside it
   paints over the top, which is what happened to Levels matched. */
.panel:has(.help:hover),
.panel:has(.help__button:focus-visible) { z-index: 50; }

/* --------------------------------------------------------------- loaded -- */

/* The glass file draws each file as its own lit box; the bento file rules
   one off from the other and names the kind. Same markup, one skin each. */
.loaded { display: grid; gap: 12px; }
.loaded__row {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--edge);
}
.loaded__badge {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-xs);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--edge); color: var(--text-2);
}
.loaded__row:first-child .loaded__badge { color: var(--gold); border-color: var(--gold-ring); }
.loaded__body { min-width: 0; }
.loaded__kind { display: none; }
.loaded__name { display: block; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loaded__meta { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; }

/* ---------------------------------------------------------------- terms -- */

.terms { display: grid; gap: 0; margin-top: var(--s-5); }

/* Two columns: what it is, and what it will be. The way out of a limit is a
   long phrase that will not sit on the same line in a three-column tile, so
   it takes the next one, under the value it belongs to and aligned with it,
   rather than floating off to the right on a rule of its own. */
.term {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--edge);
  font-size: var(--t-sm);
}
.term:last-child { border-bottom: 0; }
.term > span { color: var(--text-3); }
.term > b { color: var(--text); font-weight: 500; }
.term > .upgrade--inline {
  grid-column: 2;
  justify-self: start;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--t-xs);
}

/* The admin export. Deliberately unlike the rest of the panel: it is a tool
   for whoever runs the app, not a control the customer is meant to want. */
.admin {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--edge-hi);
}
.admin__which {
  font-size: var(--t-xs);
  font-family: var(--mono);
  color: var(--text-3);
}
.admin__tag {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-right: var(--s-1);
}

.readout { display: grid; gap: 0; }
.readout__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--edge);
  font-size: var(--t-sm);
}
.readout__row:last-child { border-bottom: 0; }
.readout__row span { color: var(--text-3); }
.readout__row b { font-family: var(--mono); color: var(--text); font-weight: 500; }
.readout__row b.gold { color: var(--gold); }
.readout__row small { color: var(--text-3); font-size: var(--t-xs); }

/* --------------------------------------------------------------- switch -- */

.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--t-sm); color: var(--text-2); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 38px; height: 22px; flex: 0 0 auto;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--edge);
  position: relative;
  transition: background var(--dur-2) var(--ease);
}
.switch__dot {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.switch.on .switch__track { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: transparent; }
.switch.on .switch__dot { transform: translateX(16px); background: var(--on-gold); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- tiles -- */

/* Borrowed from the bento layout: the finished numbers as their own row of
   small surfaces, so the result is read at a glance rather than in a table. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.tile {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--glass-2);
  padding: var(--s-4);
}
.tile__label { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-2); }
.tile__value { font-size: 1.7rem; line-height: 1; letter-spacing: -0.025em; color: var(--text); font-weight: 600; }
.tile__value small { font-size: var(--t-sm); color: var(--text-3); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.tile__value.gold { color: var(--gold); }
.tile__value.waiting { color: var(--text-3); }
.tile__sub { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-2); }

/* ------------------------------------------------------- the comparison -- */

.compare-table { display: grid; gap: 0; }
.compare-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(90px, 1fr));
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--edge);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row--head { border-bottom-color: var(--edge-hi); padding-bottom: var(--s-2); }
.compare-row--head span {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  text-align: right;
}
.compare-row--head span:first-child { text-align: left; }
.compare-row--head .is-master { color: var(--gold); }
.compare-row__k { font-size: var(--t-sm); color: var(--text-2); }
.compare-row__k small { display: block; color: var(--text-3); font-size: var(--t-xs); margin-top: 2px; }
.compare-row__name { display: inline-flex; align-items: center; gap: 6px; }
.compare-row__v { font-family: var(--mono); font-size: var(--t-base); color: var(--text); text-align: right; }
.compare-row__v.dim { color: var(--text-3); }
.compare-row__v.gold { color: var(--gold); }

/* -------------------------------------------------------------- insight -- */

/* The glass file reads these as four lit tiles, two across. */
.insight { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.insight__item {
  display: block;
  border-radius: 18px;
  padding: 20px;
  background: var(--glass-2);
  border: 1px solid var(--edge);
}
.insight__figure { font-family: var(--mono); font-size: 22px; color: var(--gold); margin-bottom: 8px; }
.insight__body h3.sub { margin-bottom: 5px; }
.insight__body p { margin: 0; color: var(--text-3); font-size: var(--t-sm); }

/* ------------------------------------------- the master you have opened -- */

/* What a saved master looks like when you click it in the list: everything it
   kept, and an honest line about the one thing it did not. */
.opened { border-color: var(--gold-ring); }
.opened__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.opened__when { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); }
.opened__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.opened__settings { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* ------------------------------------------------------------- projects -- */

.projects { display: grid; gap: var(--s-3); }
.project {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--glass-2);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
@media (hover: hover) { .project:hover { border-color: var(--edge-hi); background: var(--glass-3); } }
.project__when { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); width: 11ch; flex: 0 0 auto; }
.project__names { flex: 1 1 240px; min-width: 0; }
.project__names b { display: block; color: var(--text); font-size: var(--t-base); overflow-wrap: anywhere; }
.project__names span { font-size: var(--t-sm); color: var(--text-3); overflow-wrap: anywhere; }
.project__figs { display: flex; gap: var(--s-5); flex: 0 0 auto; }
.project__fig { text-align: right; }
.project__fig b { display: block; font-family: var(--mono); font-size: var(--t-base); color: var(--text); }
.project__fig span { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.project__actions { display: flex; gap: var(--s-2); flex: 0 0 auto; }

.account {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--glass-2);
  margin-bottom: var(--s-5);
}
.account input[type="email"] {
  font: inherit;
  font-size: var(--t-base);
  flex: 1 1 240px;
  min-width: 0;
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.8rem;
}
.account input[type="email"]::placeholder { color: var(--text-3); }
.account__who { flex: 1 1 240px; min-width: 0; }
.account__who b { display: block; color: var(--text); overflow-wrap: anywhere; }

.empty { text-align: center; padding: var(--s-7) var(--s-5); }
.empty__mark {
  width: 52px; height: 52px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: var(--glass-2);
  display: grid; place-items: center; color: var(--text-3);
}
.empty h3 { margin-bottom: var(--s-2); }
.empty p { margin: 0 auto; max-width: 46ch; color: var(--text-3); font-size: var(--t-sm); }

/* -------------------------------------------------------------- tables --- */

table.metrics { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.metrics th, table.metrics td { text-align: right; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--edge); }
table.metrics thead th { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
table.metrics tbody th { text-align: left; font-weight: 500; color: var(--text-2); }
table.metrics td { font-family: var(--mono); color: var(--text); }
table.metrics tr:last-child th, table.metrics tr:last-child td { border-bottom: 0; }
table.metrics .result { color: var(--gold); }

.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-sm); color: var(--text-3); margin-top: var(--s-3); }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: var(--s-2); vertical-align: middle; }

/* --------------------------------------------------- notices and errors -- */

.warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.warnings li { position: relative; padding-left: 1.8rem; font-size: var(--t-sm); color: var(--text-2); max-width: 74ch; }
.warnings li::before {
  content: "!";
  position: absolute; left: 0; top: 0.12em;
  width: 18px; height: 18px;
  border: 1px solid var(--gold-ring);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.error {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  background: var(--danger-soft);
  border: 1px solid rgba(255, 107, 99, 0.35);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.error__body { flex: 1 1 auto; }
.error__body b { display: block; color: #ffb9b5; margin-bottom: 2px; }
.error__body p { margin: 0; color: var(--text-2); font-size: var(--t-sm); }

/* ------------------------------------------------------------- progress -- */

.progress { margin-top: var(--s-5); }
.progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-2); }
.progress__stage {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-size: var(--t-base);
  font-weight: 500;
}

/* Three dots that breathe, so a stage that takes half a minute still looks
   like something is happening rather than like a stuck label. */
.progress__dots { display: inline-flex; gap: 4px; }
.progress__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: think 1.1s ease-in-out infinite;
}
.progress__dots i:nth-child(2) { animation-delay: 0.16s; }
.progress__dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes think {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.progress__clock { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-3); }
.track { height: 5px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.track__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.55), var(--gold));
  border-radius: var(--r-full);
  transition: width var(--dur-3) var(--ease);
  position: relative;
  overflow: hidden;
}
/* A slow sheen, so the longest stage never reads as frozen while the fraction
   sits still. It moves; the number itself still tells the truth. */
.track__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  animation: sheen 1.6s linear infinite;
}
@keyframes sheen { to { transform: translateX(100%); } }

.spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(26, 20, 5, 0.3);
  border-top-color: var(--on-gold);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.ghost .spinner { border-color: var(--edge); border-top-color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ disclosure - */

.disclosure { margin-top: var(--s-5); }
.disclosure__button {
  background: var(--glass-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  color: var(--text-3);
  box-shadow: none;
  width: 100%;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
}
@media (hover: hover) {
  .disclosure__button:hover { color: var(--text); border-color: var(--edge-hi); background: var(--glass-3); transform: none; box-shadow: none; }
}
.disclosure__panel { display: grid; gap: var(--s-5); margin-top: var(--s-5); animation: rise var(--dur-3) var(--ease) both; }
.disclosure__chev { transition: transform var(--dur-2) var(--ease); }
.disclosure__chev.open { transform: rotate(180deg); }

/* ---------------------------------------------------------------- foot --- */

/* One centred line. The wordmark it used to sit beside is in the top bar
   now, where both mockups put it. */
.foot { margin-top: 34px; text-align: center; }
.foot p { margin: 0; font-size: 12px; color: var(--text-3); }

/* ---------------------------------------------------------------- gate --- */

.gate { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-7) 5vw; }
.gate__inner { max-width: 46ch; }
.gate__inner ul { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.gate__inner li { padding-left: 1.7rem; position: relative; font-size: var(--t-sm); color: var(--text-3); }
.gate__inner li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--gold); }

.noscript { max-width: 46ch; margin: 18vh auto; padding: 0 5vw; color: var(--text-2); }
.noscript h1 { color: var(--text); font-weight: 600; letter-spacing: -0.02em; }

/* -------------------------------------------------------- narrow window -- */

/* The glass file folds its four two-column blocks at 960px. Same four here. */
@media (max-width: 960px) {
  .herocards, .faders, .export, .insight { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .drops { grid-template-columns: 1fr; }
  .drops__arrow { justify-self: start; }
  .faders { grid-template-columns: 1fr; }
  /* Narrow: the label takes its own line and each figure carries its own
     caption, rather than three unlabelled numbers under a hidden header. */
  .compare-row { grid-template-columns: repeat(3, 1fr); gap: var(--s-2) var(--s-4); }
  .compare-row__k { grid-column: 1 / -1; }
  .compare-row__v { text-align: left; }
  .compare-row__v::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 2px;
  }
  .compare-row--head { display: none; }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .track__fill::after { display: none; }
}


/* ------------------------------------------------------ Pro, as a list -- */

/* Every benefit on its own line behind a mint tick, so the offer reads as
   what you get rather than as a paragraph about a feature. */
.offer__list {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.offer__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--text);
}
.offer__list .tick { flex: 0 0 auto; margin-top: 1px; }

/* --------------------------------------------------- the info pages -- */

.infopage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 7vh 16px;
}
.infopage__scrim { position: fixed; inset: 0; background: rgba(7, 8, 12, 0.74); }
.infopage__panel { position: relative; width: min(720px, 100%); padding: 36px 40px 40px; }
.infopage__close { position: absolute; top: 16px; right: 16px; font-size: 20px; line-height: 1; }
.infopage .head { margin: 6px 0 0; }
.lede-sm { margin: 12px 0 22px; font-size: var(--t-md); line-height: 1.6; color: var(--text-2); }
.steps { margin: 0 0 30px; padding-left: 1.3em; display: grid; gap: 14px; color: var(--text-2); line-height: 1.6; font-size: var(--t-base); }
.steps b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.faq { margin: 0; }
.faq dt { margin-top: 18px; color: var(--text); font-weight: 600; font-size: var(--t-base); }
.faq dd { margin: 5px 0 0; color: var(--text-2); line-height: 1.6; font-size: var(--t-base); }

/* ------------------------------------------------------- the footer -- */

.foot__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.foot__links .linkish,
.foot__links a {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .foot__links .linkish:hover,
  .foot__links a:hover { color: var(--text); background: none; box-shadow: none; }
}

/* ------------------------------------------------ the export picker -- */

/* Format and sample rate, side by side under the download button, on the
   plans that offer more than one of either. */
.exportpick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.exportpick .field { min-width: 0; }
.exportpick select { width: 100%; }
.infopage a { color: var(--gold); text-underline-offset: 3px; }

/* ------------------------------------------------------- signing in -- */

/* The sign-in dialog sits on the info pages' overlay and panel, narrower. */
.signin__panel { width: min(480px, 100%); }
.signin__form { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.signin__form .lede-sm { margin: 0; }
.signin__form > button[type="submit"] { justify-self: start; }

.textin {
  font: inherit;
  font-size: var(--t-base);
  width: 100%;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem;
}
.textin::placeholder { color: var(--text-3); }
.textin:focus { outline: none; border-color: var(--gold-ring); box-shadow: 0 0 0 3px var(--gold-soft); }
.textin--code {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.6rem;
}

.check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
}
.check input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }

.signin__alt { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.signin .linkish {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signin .linkish:disabled { color: var(--text-3); text-decoration: none; opacity: 1; }
@media (hover: hover) {
  .signin .linkish:hover:not(:disabled) { color: var(--gold-2); transform: none; box-shadow: none; }
}
.signin__legal { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--text-3); }
.signin__msg {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.signin__msg--error { background: var(--danger-soft); border: 1px solid rgba(255, 107, 99, 0.4); color: #ffb9b5; }

/* The account at the foot of the sidebar: an address can be long. */
.sidebar__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__signin,
.sidebar__signout { justify-self: start; margin: 0 var(--s-2); }