/* /browser, the Selan Browser Extension's own page (extension-design.selan.ai, proposed-browser-landing, as
   Tomas agreed it on 7 Nov 2026): the home page's sky over the hero, the popup, the two install steps with one
   line to copy per agent, the example, the fence and the closing button. The sky and the hero's type are
   index.css's values, restated here, because index.css carries the whole home page with it. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.bblock, .bend { scroll-margin-top: 24px; }

/* Chrome's mark on every Add to Chrome, the header's included. */
.badd { gap: 8px; }
.bchrome { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* The hero: the home page's sky, drifting as it does there. */
.bhero { position: relative; padding: 120px 0 64px; overflow: hidden; }
.bhero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 15, 20, 0) 0%, var(--g-ink) 92%);
}
.bhero > .wrap { position: relative; z-index: 2; }
.bhero > .wrap::before {
  content: ""; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 900px; height: 520px;
  background: radial-gradient(closest-side, rgba(13, 15, 20, .55), transparent 75%); z-index: -1; pointer-events: none;
}
.sky {
  position: absolute; inset: -15% -10% 0 -10%; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 96%);
}
.sky i { position: absolute; display: block; background-size: 100% 100%; mix-blend-mode: screen; opacity: .7; will-change: transform; }
.sky .b1 { width: 120vw; height: 130vh; left: -35%; top: -30%; background-image: url(/img/sky-1.webp); animation: bdrift1 38s ease-in-out infinite; }
.sky .b2 { width: 110vw; height: 140vh; right: -35%; top: -32%; background-image: url(/img/sky-2.webp); animation: bdrift2 46s ease-in-out infinite; }
.sky .b3 { width: 95vw; height: 110vh; left: 12%; top: 18%; background-image: url(/img/sky-3.webp); animation: bdrift3 32s ease-in-out infinite; }
.sky .b4 { width: 85vw; height: 95vh; left: -15%; top: 35%; background-image: url(/img/sky-4.webp); animation: bdrift4 42s ease-in-out infinite; }
@keyframes bdrift1{0%{transform:translate(-10%,-6%) scale(.9)}25%{transform:translate(28%,10%) scale(1.35)}50%{transform:translate(10%,30%) scale(1.05)}75%{transform:translate(-18%,14%) scale(1.25)}100%{transform:translate(-10%,-6%) scale(.9)}}
@keyframes bdrift2{0%{transform:translate(8%,-10%) scale(1.1)}25%{transform:translate(-30%,16%) scale(1.3)}50%{transform:translate(-12%,-18%) scale(.9)}75%{transform:translate(20%,20%) scale(1.2)}100%{transform:translate(8%,-10%) scale(1.1)}}
@keyframes bdrift3{0%{transform:translate(-14%,8%) scale(1)}25%{transform:translate(34%,-22%) scale(1.5)}50%{transform:translate(16%,24%) scale(.8)}75%{transform:translate(-26%,-12%) scale(1.3)}100%{transform:translate(-14%,8%) scale(1)}}
@keyframes bdrift4{0%{transform:translate(12%,10%) scale(1.15)}25%{transform:translate(-22%,-28%) scale(.85)}50%{transform:translate(24%,-14%) scale(1.35)}75%{transform:translate(-12%,20%) scale(1)}100%{transform:translate(12%,10%) scale(1.15)}}
@media (prefers-reduced-motion: reduce) { .sky i { animation: none; } }

.bhero-copy { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; text-align: center; }
.bhero-pill {
  display: inline-block; border: 1px solid var(--g-line); border-radius: 999px; background: rgba(13, 15, 20, .55); backdrop-filter: blur(6px);
  padding: 6px 13px; font: 500 10px var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: #a8acb6;
}
.bhero h1 { margin: 30px 0 0; font-size: 62px; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; color: var(--g-text); text-wrap: balance; }
.bhero .hl1, .bhero .hl2 { display: block; }
.bhero .hl2 { color: var(--g-action-text); }
.bsub {
  margin: 26px auto 0; max-width: 660px; font-size: 18.5px; line-height: 1.66; color: var(--g-text-2); letter-spacing: -.004em; text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(13, 15, 20, .85), 0 0 2px rgba(13, 15, 20, .6);
}

/* The hero's and the closing section's pair: as tall as each other, the primary with the home page's glow. */
.bactions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.bactions .btn-primary { font-size: 15.5px; padding: 14px 28px; box-shadow: 0 8px 24px -10px rgba(123, 97, 255, .45); }
.bactions .btn-primary .bchrome { width: 18px; height: 18px; }
.bactions .btn-ghost { display: inline-flex; align-items: center; font-size: 15.5px; padding: 14px 22px; line-height: 1; }
.bnote { margin: 16px 0 0; text-align: center; font: 11px/1.6 var(--g-mono); letter-spacing: .04em; color: var(--g-dim); }
.bnote em { font-style: normal; color: var(--g-line-2); padding: 0 7px; }

/* What it runs with: names, not links, each logo a mask over the text's colour (the home page's runs-with). */
.bruns { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
/* Wider than the hero's text on a wide screen, as on the home page. */
@media (min-width: 1121px) { .bruns { margin-inline: -72px; } }
.brw {
  display: flex; align-items: center; gap: 7px; padding: 5px 6px;
  font-size: 13px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: var(--g-muted);
}
.brw-logo { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--rw-logo) center/contain no-repeat; mask: var(--rw-logo) center/contain no-repeat; }
.brw-claude { --rw-logo: url(/img/runs-with/claude.svg); }
.brw-openai { --rw-logo: url(/img/runs-with/openai.svg); }
.brw-kimi { --rw-logo: url(/img/runs-with/kimi.svg); }

/* The popup, drawn from the extension's popup.html and selan-extension.css in the state of its Web Store shot (the
   design board's "Active, three tabs"), so it is sharp at any zoom. It is a picture: no controls, hidden from
   assistive tech, the caption says what it shows. The popup is 360 wide; --u is one of its px at the figure's width. */
.bshot { position: relative; z-index: 2; padding: 8px 0 24px; }
.bshot figure { margin: 0 auto; width: 490px; max-width: 100%; container-type: inline-size; }
.bshot figcaption { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--g-muted); }

/* selan-extension.css :root: the extension's own Graphite, not this site's darker one. */
.bpop {
  --g-panel: #1f252e; --g-raise: #282f3a; --g-text: #fff; --g-text-2: #d7dee7; --g-muted: #b8c2cf; --g-dim: #8f9bab;
  --g-line: rgba(240, 243, 247, .1); --g-tile: #8b6cff; --g-live: #3ddc97; --g-live-dim: rgba(61, 220, 151, .12);
  --g-live-text: #8ff0c8; --g-danger-dim: rgba(240, 97, 122, .12); --g-danger-line: rgba(240, 97, 122, .3); --g-danger-text: #ffb0be;
  --g-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --u: calc(100cqi / 360);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--g-panel);
  box-shadow: 0 30px 80px -30px rgba(123, 97, 255, .35), 0 0 0 1px var(--g-line);
  font: 400 calc(13 * var(--u))/1 var(--g-sans); color: var(--g-text); -webkit-font-smoothing: antialiased;
  user-select: none; cursor: default;
}
.bpop > * + * { border-top: 1px solid var(--g-line); }
.bp-head, .bp-who, .bp-line, .bp-desc, .bp-tab, .bp-foot { display: flex; align-items: center; }
.bp-head { gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); }
.bp-who { gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); }
.bp-section { padding: calc(16 * var(--u)) calc(20 * var(--u)); }
.bp-end { margin-left: auto; }
.bp-ic { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bp-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.bp-mark { display: block; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.bp-brand-text { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.bp-brand-name { height: calc(16 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.bp-brand-tag { height: calc(10 * var(--u)); font: 600 calc(10 * var(--u))/1 var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-muted); }
.bp-link {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u));
  border: 1px solid var(--g-line); border-radius: calc(8 * var(--u)); color: var(--g-muted); font-weight: 500;
}
.bp-link .bp-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

.bp-avatar { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--g-tile); color: #fff; }
.bp-avatar .bp-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.bp-status { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); color: var(--g-text-2); white-space: nowrap; }
.bp-status::before {
  content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%;
  background: var(--g-live); box-shadow: 0 0 0 calc(3 * var(--u)) var(--g-live-dim);
}

.bp-line { gap: calc(8 * var(--u)); height: calc(24 * var(--u)); }
.bp-title { font-size: calc(14 * var(--u)); font-weight: 600; }
.bp-count { margin-left: calc(6 * var(--u)); color: var(--g-dim); font-variant-numeric: tabular-nums; }
.bp-flag {
  display: inline-flex; align-items: center; height: calc(18 * var(--u)); padding: 0 calc(6 * var(--u));
  border: 1px solid var(--g-live-dim); border-radius: calc(5 * var(--u)); background: var(--g-live-dim); color: var(--g-live-text);
  font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.bp-desc { gap: calc(6 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(4 * var(--u)); color: var(--g-muted); }
.bp-num { font-family: var(--g-mono); color: var(--g-text-2); }
.bp-info { display: grid; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--g-dim); }
.bp-info .bp-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.bp-tabs { padding-bottom: calc(10 * var(--u)); }
.bp-tabs .bp-line { margin-bottom: calc(8 * var(--u)); }
.bp-tab { gap: calc(10 * var(--u)); height: calc(36 * var(--u)); }
.bp-tab + .bp-tab { margin-top: calc(2 * var(--u)); }
.bp-fav { display: block; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.bp-tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bp-foot { justify-content: flex-end; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); background: color-mix(in srgb, var(--g-text) 3.5%, var(--g-panel)); }
.bp-btn {
  display: inline-flex; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u));
  border: 1px solid; border-radius: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap;
}
.bp-ghost { border-color: var(--g-line); color: var(--g-text-2); }
.bp-danger { border-color: var(--g-danger-line); background: var(--g-danger-dim); color: var(--g-danger-text); }

.bblock { padding: 96px 0 0; }
.beyebrow { margin: 0 0 16px; font: 12.5px/1.6 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-action-text); }
.bh2 { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 650; letter-spacing: -.025em; color: var(--g-text); text-wrap: balance; }
.bp { margin: 18px 0 0; max-width: 460px; font-size: 16.5px; line-height: 1.65; color: var(--g-text-2); }
.bblock h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--g-text); }
.bblock li p, .bfacts p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--g-muted); }

/* Install: two numbered steps; the second is one line to copy for the agent picked above it. */
.bsteps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.55fr; gap: 64px; }
.bsteps li { min-width: 0; }
.bn { display: block; margin-bottom: 14px; font: 12px/1.6 var(--g-mono); letter-spacing: .14em; color: var(--g-action-text); }
.bsteps li > .btn-primary { margin-top: 22px; }

.btabs { display: inline-flex; gap: 2px; margin-top: 18px; padding: 3px; border: 1px solid var(--g-line-2); border-radius: 10px; background: var(--g-wash); }
.btabs button { padding: 7px 12px; border: 0; border-radius: 7px; background: none; font: 500 13px/1 var(--g-sans); color: var(--g-muted); cursor: pointer; }
.btabs button:hover { color: var(--g-text); }
.btabs button[aria-pressed="true"] { background: var(--g-raise); color: var(--g-text); }
.btabs button:focus-visible, .bcopy:focus-visible { outline: 2px solid var(--g-focus); outline-offset: 1px; }

.bcode {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 12px 12px 16px;
  border: 1px solid var(--g-line-2); border-radius: var(--g-radius-card); background: var(--g-sunken);
}
.bcode code { flex: 1; min-width: 0; font: 13px/1.55 var(--g-mono); font-variant-ligatures: none; color: var(--g-text); overflow-wrap: anywhere; }
.bcopy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--g-line-2); border-radius: var(--g-radius-control); background: var(--g-raise);
  font: 500 13px var(--g-sans); color: var(--g-text); cursor: pointer;
}
.bcopy:hover { border-color: var(--g-action-line); }
.bcopy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Use it: the words beside the terminal they produce. Its bullets are drawn, not a glyph from the font. */
.buse { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.bterm {
  margin: 0; padding: 22px 24px; border: 1px solid var(--g-line-2); border-radius: var(--g-radius-card); background: var(--g-sunken);
  font: 13px/1.7 var(--g-mono); color: var(--g-text-2); white-space: pre-wrap;
}
.bterm .byou { color: var(--g-text); }
.bterm i { font-style: normal; color: var(--g-dim); }
.bdot { display: inline-block; width: 8px; height: 8px; margin-right: 1ch; vertical-align: 0.05em; fill: var(--g-action-text); }

.bfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--g-line); }

.bend { padding: 120px 0 8px; text-align: center; }
.bend .bactions { margin-top: 30px; }

@media (max-width: 1080px) {
  .bfacts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bhero { padding: 88px 0 48px; }
  .bhero h1 { font-size: 48px; }
  .bsteps, .buse { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .bhero { padding: 72px 0 40px; }
  .bhero h1 { font-size: 38px; }
  .bsub { font-size: 16.5px; }
  .bblock { padding-top: 72px; }
  .bh2 { font-size: 30px; }
  .bfacts { grid-template-columns: 1fr; gap: 28px; }
  .btabs { display: flex; }
  .btabs button { flex: auto; padding-inline: 8px; font-size: 12.5px; white-space: nowrap; }
  .bcode { flex-direction: column; align-items: stretch; }
  .bend { padding: 88px 0 8px; }
}
@media (max-width: 374px) {
  .btabs button { padding-inline: 5px; font-size: 12px; }
}