/* maajins.lol — shared styles
   Dark, near-black, one accentless palette so the type and the artwork carry
   the page. Everything is a token so a re-skin is one block, not a hunt. */

:root {
  --bg:        #000000;
  --bg-soft:   #070707;
  --card:      #0b0b0b;
  --card-hi:   #101010;
  --fg:        #ffffff;
  --muted:     #8b8b8b;
  --muted-dim: #5e5e5e;
  --line:      rgba(255, 255, 255, 0.08);
  --line-hi:   rgba(255, 255, 255, 0.16);

  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1180px;

  /* the wordmark gradient: bright at the start, falling away to graphite */
  --wordmark: linear-gradient(104deg,
      #ffffff 0%, #fafafa 28%, #a8a8a8 62%, #6f6f6f 88%, #5a5a5a 100%);

  --font: 'Poppins', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* .btn sets display: inline-flex, which outranks the browser's own rule
   for [hidden]. Without this a hidden button still draws. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(0, 0, 0, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.brand {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-link {
  font-size: 15px;
  color: var(--muted);
  transition: color .18s ease;
}
.nav-link:hover,
.nav-link.current { color: var(--fg); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, background .2s ease,
              border-color .2s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: #ffffff;
  color: #000000;
}
.btn-primary:hover { background: #e8e8e8; }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-hi);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

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

.hero {
  position: relative;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* wide enough for the full wordmark: .hero hides overflow, so a cap that is
   too small clips the last letter rather than wrapping it */
.hero-inner { position: relative; z-index: 2; max-width: min(860px, 100%); }

.eyebrow {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 6px;
}

.wordmark {
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  background: var(--wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
  white-space: nowrap;
}

.tagline {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 34px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* The blossom photo, behind the type on the right.
   No cropping: `screen` maps the shot's black ground to nothing, so the empty
   part of the frame is invisible on a black page and the photo can sit at its
   natural aspect. Forcing it into a box with object-fit zoomed it to mush.
   The mask feathers the frame edge, which `screen` alone leaves faintly
   visible because the ground is near-black rather than pure #000. It is
   centred on the flower mass, not the middle of the frame.
   Source is 500x342, so it is held to a modest upscale to stay sharp. */
.branch {
  position: absolute;
  right: -40px;
  top: 46%;
  transform: translateY(-50%);
  width: min(64vw, 800px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;

  mix-blend-mode: screen;

  /* Sitting IN the page rather than on top of it.
     brightness under 1 is the main move: screen already lifts everything, so
     leaving it above 1 blew the petals to flat white with no tone left in them,
     which is what reads as pasted-on. Pulling it back restores the highlight
     roll-off. A little desaturation and slightly flatter contrast stop it
     out-punching the type, and the overall opacity lets the black ground of the
     page show through the petals instead of them floating over it. */
  filter: brightness(0.86) contrast(0.94) saturate(0.82);
  opacity: 0.9;

  /* a longer, softer falloff so the frame dissolves gradually rather than
     ending on a detectable line */
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 66% 54%,
                        #000 30%, rgba(0,0,0,.72) 56%,
                        rgba(0,0,0,.3) 78%, transparent 96%);
  mask-image: radial-gradient(ellipse 66% 66% at 66% 54%,
                #000 30%, rgba(0,0,0,.72) 56%,
                rgba(0,0,0,.3) 78%, transparent 96%);
}

/* ---------------------------------------------------------------- sections */

.section { padding: 96px 0; }
.section-tight { padding-top: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section-title {
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.section-sub { font-size: 16px; color: var(--muted); margin-top: 4px; }

.counter {
  font-size: 15px;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: border-color .2s ease, background .2s ease;
}
.card:hover { border-color: var(--line-hi); background: var(--card-hi); }

.card + .card { margin-top: 14px; }

.card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.card-body { color: var(--muted); font-size: 15px; }

.tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  color: var(--muted);
}
.tag-new { color: #fff; border-color: rgba(255,255,255,.35); }


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}

/* ---------------------------------------------------------------- updates */

.update {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #101010 0%, #090909 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px 24px;
  transition: border-color .25s ease;
}
.update:hover { border-color: var(--line-hi); }

/* The light that follows your cursor. --mx / --my are written by app.js on
   pointer move; the fallback keeps it centred so a card that has never been
   hovered still looks right. It sits under the text on its own layer and
   ignores the pointer, so it can never eat a click. */
.update::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.04) 38%,
    transparent 70%
  );
}
.update:hover::before { opacity: 1; }

/* Coarse pointers have no hover, so the glow would either never show or stick
   after a tap. Leave it off there. */
@media (hover: none) {
  .update::before { display: none; }
}
.update + .update { margin-top: 14px; }

.update-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.update-kind { color: var(--muted); font-weight: 500; }
.update-sep  { color: var(--muted-dim); }
.update-pin  { color: var(--fg); font-weight: 500; }

.update-time {
  margin-left: auto;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.update-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.35;
}

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

.footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 44px;
  color: var(--muted-dim);
  font-size: 14px;
}

/* ---------------------------------------------------------------- docs */

.docs-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 48px;
  padding: 48px 0 96px;
  align-items: start;
}

.side {
  position: sticky;
  top: 106px;
  border-right: 1px solid var(--line);
  padding-right: 20px;
}

.side-group + .side-group { margin-top: 24px; }

.side-label {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 10px;
}

.side a {
  display: block;
  font-size: 14.5px;
  color: var(--muted);
  padding: 6px 0;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: color .16s ease, border-color .16s ease;
}
.side a:hover { color: var(--fg); }
.side a.active { color: var(--fg); border-left-color: var(--fg); }

.doc h1 {
  font-size: clamp(34px, 4.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 10px;
}

/* the first h2 carries a 46px top margin meant to separate it from body copy;
   straight under the h1 that reads as a gap, so pull it back */
.doc h1 + h2 { margin-top: 22px; }

/* Links in the prose inherit color and lose their underline from the global
   `a` rule, which makes them invisible against the muted paragraph text. */
.doc p a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-hi);
  transition: text-decoration-color .18s ease;
}
.doc p a:hover { text-decoration-color: var(--fg); }

.doc .lede { font-size: 17px; color: var(--muted); margin-bottom: 40px; }

.doc h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 46px 0 14px;
  scroll-margin-top: 100px;
}

.doc h3 {
  font-size: 17.5px;
  font-weight: 500;
  margin: 26px 0 8px;
  letter-spacing: -0.015em;
}

.doc p  { color: var(--muted); margin-bottom: 14px; }
.doc ul,
.doc ol { color: var(--muted); margin: 0 0 16px 20px; }
.doc li { margin-bottom: 7px; }
.doc ol li { padding-left: 4px; }
.doc ol li::marker { color: var(--muted-dim); }
.doc strong { color: var(--fg); font-weight: 500; }

.doc code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: #101010;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  color: #dcdcdc;
}

.doc pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 18px;
}
.doc pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.7; }

.note {
  border-left: 2px solid var(--line-hi);
  background: var(--card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 15px;
}
.note strong { color: var(--fg); }

table.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.doc-table th, .doc-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.doc-table th { color: var(--fg); font-weight: 500; }
.doc-table td { color: var(--muted); }

/* ---------------------------------------------------------------- dashboard */

.panel-wrap { padding: 72px 0 96px; }

.panel {
  max-width: 520px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 34px 30px;
}

.panel-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.panel-muted { color: var(--muted); font-size: 15px; }

.panel-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.panel-error {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
  border-left: 2px solid var(--line-hi);
  padding-left: 12px;
}

.userbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  display: block;
}

.userbar-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.userbar-sub { font-size: 14px; color: var(--muted-dim); }

.dash-pre {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
  overflow-x: auto;
}
.dash-pre code {
  font-family: var(--mono);
  font-size: 13px;
  color: #dcdcdc;
}

button.btn { font-family: inherit; }
button.btn[disabled] { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- script line */

.script-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 22px;
}

.script-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.script-title { font-size: 15px; color: var(--fg); }
.script-help  { font-size: 13.5px; color: var(--muted-dim); margin-top: 2px; }

/* The line is long and contains the key. Scroll it rather than wrap it, so it
   reads as one command instead of a wall of characters. */
.script-line {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: #dcdcdc;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- web config */

.cfg-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.cfg-tabs {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.cfg-tab {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.cfg-tab:hover { color: var(--fg); }
.cfg-tab.active { background: var(--card-hi); color: var(--fg); }

.cfg-status {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted-dim);
  min-height: 1em;
}
.cfg-status.is-ok  { color: var(--muted); }
.cfg-status.is-bad { color: #ff8f8f; }

.cfg-rows {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cfg-group + .cfg-group { border-top: 1px solid var(--line); }

.cfg-section {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding: 16px 22px 8px;
}

.cfg-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}
.cfg-row:last-child { border-bottom: 0; }

.cfg-row { transition: background .13s ease; }
.cfg-row:hover { background: rgba(255, 255, 255, .022); }

/* --- search --- */
.cfg-search {
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
  background: #141414;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 200px;
  margin-left: auto;
}
.cfg-search:focus { outline: none; border-color: var(--fg); }
.cfg-search::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.cfg-tabs.is-dimmed { opacity: .4; }

.cfg-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 22px 2px 0;
}

.cfg-label {
  font-size: 15px;
  color: var(--fg);
  /* takes the slack so every control lines up on the right edge */
  flex: 1 1 auto;
  min-width: 0;
}

/* --- toggle --- */
.cfg-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 25px;
  padding: 0;
  border-radius: 999px;
  /* the off state needs to read as a switch against a near-black card, so the
     track is lifted off the background rather than blending into it */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1c1c1c;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.cfg-toggle:hover { border-color: rgba(255, 255, 255, 0.38); }
.cfg-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--muted);
  transform: translateY(-50%);
  transition: transform .2s ease, background .2s ease;
}
.cfg-toggle.on { background: #ffffff; border-color: #ffffff; }
.cfg-toggle.on::after { transform: translateY(-50%) translateX(19px); background: #000000; }

/* --- slider --- */
.cfg-slider {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(300px, 52vw);
}

.cfg-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 3px;
  background: var(--line-hi);
  outline: none;
  cursor: pointer;
}
.cfg-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
.cfg-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.cfg-value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  min-width: 78px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- select --- */
.cfg-select {
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: #141414;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  min-width: 150px;
}

/* --- text --- */
.cfg-text {
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: #141414;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 150px;
  max-width: 200px;
}
.cfg-text:focus { outline: none; border-color: var(--fg); }

/* --- colour --- */
.cfg-color {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}
.cfg-color::-webkit-color-swatch-wrapper { padding: 3px; }
.cfg-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.cfg-color::-moz-color-swatch { border: 0; border-radius: 4px; }

/* --- keybind --- */
.cfg-keybind { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.cfg-keybind .cfg-mode { min-width: 104px; }

.cfg-keycap {
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  background: #141414;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 118px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.cfg-keycap:hover { border-color: var(--fg); }
.cfg-keycap.listening {
  border-color: #ffffff;
  color: var(--muted);
  font-style: italic;
}

/* --- multi select dropdown --- */
.cfg-dropdown { flex: 0 0 auto; position: relative; }

.cfg-dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 190px;
  text-align: left;
}

.cfg-dropdown-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-caret { color: var(--muted-dim); font-size: 11px; }

.cfg-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: #0e0e0e;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  padding: 5px;
}

.cfg-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  transition: background .14s ease, color .14s ease;
}
.cfg-option:hover { background: var(--card-hi); color: var(--fg); }
.cfg-option[aria-selected="true"] { color: var(--fg); }

.cfg-dropdown-empty {
  font-size: 13px;
  color: var(--muted-dim);
  padding: 10px 9px;
}

/* the pill inside a dropdown row, same switch at a smaller size */
.cfg-toggle-sm {
  width: 34px;
  height: 19px;
  pointer-events: none;
  flex: 0 0 auto;
}
.cfg-toggle-sm::after { width: 13px; height: 13px; left: 2px; }
.cfg-toggle-sm.on::after { transform: translateY(-50%) translateX(15px); }

/* --- token --- */
.cfg-token {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.cfg-token-label { font-size: 15px; color: var(--fg); }
.cfg-token-help  { font-size: 13.5px; color: var(--muted-dim); margin-top: 2px; }

.cfg-token-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.cfg-token-value {
  font-family: var(--mono);
  font-size: 13px;
  color: #dcdcdc;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  overflow-x: auto;
  white-space: nowrap;
  flex: 1 1 260px;
  min-width: 0;
}

@media (max-width: 620px) {
  .cfg-row { flex-wrap: wrap; gap: 10px; }
  .cfg-slider { width: 100%; }
}

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

.rise { opacity: 0; transform: translateY(14px); }
.rise.in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 0; }
  .side {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 22px;
    margin-bottom: 30px;
  }
  .branch { right: -26%; width: 104vw; opacity: .42; }
  .hero { min-height: auto; padding: 80px 0 96px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .nav-right { gap: 16px; }
  .section { padding: 66px 0; }
  .hero-actions .btn { flex: 1 1 auto; }
}


/* ---------------------------------------------------------- control polish */

/* Panels open rather than appear. 120ms is enough to read as motion and short
   enough that nobody waits for it. */
.cfg-dropdown-panel {
  transform-origin: top center;
  animation: cfg-drop .12s cubic-bezier(.2, .7, .3, 1);
}
@keyframes cfg-drop {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.cfg-dropdown-button { transition: border-color .13s ease, background .13s ease; }
.cfg-dropdown-button:hover { border-color: var(--fg); }

/* the caret points where the panel is */
.cfg-caret { transition: transform .14s cubic-bezier(.2, .7, .3, 1); display: inline-block; }
.cfg-dropdown.open .cfg-caret { transform: rotate(180deg); }

/* single-select: a tick that only shows on the chosen row, and reserves its
   space either way so the list does not shift as you move down it */
.cfg-tick { opacity: 0; transition: opacity .12s ease; font-size: 13px; }
.cfg-option.chosen .cfg-tick { opacity: 1; }
.cfg-option.chosen { color: var(--fg); }
.cfg-option { transition: background .12s ease; }

.cfg-toggle { transition: background .16s ease, border-color .16s ease; }
.cfg-color, .cfg-text, .cfg-search { transition: border-color .13s ease; }
.cfg-tabs { transition: opacity .15s ease; }

input[type="range"] { transition: opacity .13s ease; }
.cfg-row:hover input[type="range"] { opacity: 1; }

/* The keybind mode is the one control still drawn by the browser. Its list is
   the operating system's and cannot be styled, but it is closed nearly all of
   the time -- so the closed state is made to match everything else: same
   caret, same hover, no native arrow. */
select.cfg-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.cfg-select:hover { border-color: var(--fg); }