/* ------------------------------------------------------------------
   The Blueprints Marketplace: design preview, not live.

   The site's ledger and highlighter, laid out as an asset store: search
   first, a department bar, then grids of previews. Dan asked for the shape
   of an asset marketplace (Envato Elements and its peers), not the app's
   Blueprint card, so the card here is a new one: the preview carries the
   item, and the type sits underneath on the paper.

   The tokens are copied from /index.html, as /corporate copies them. The
   site has no shared stylesheet, so a token change there is owed here.

   Wider than the site's 1120px column: a store is a grid, and four previews
   to a row at 1120 are smaller than a reader can judge a look by.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  font-weight: 800; font-style: normal; font-display: swap;
  src: url(/fonts/montserrat-800.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 900; font-style: normal; font-display: swap;
  src: url(/fonts/montserrat-900.woff2) format("woff2");
}

:root {
  /* So the browser's own scrollbars and menus follow the page's scheme
     instead of staying white on a dark page. */
  color-scheme: light dark;
  --paper: #ffffff;
  --paper-soft: #f6f7f4;
  --ink: #111310;
  --muted: #5b6058;
  --line: #e5e7e1;
  --rule: #cdd2c9;
  --accent: #4cbf35;
  --accent-text: #1c6e38;
  --hl-ink: #0b1f07;
  --seam: #9aa093;
  --err: #b3261e;
  --ground: #ffffff;
  --ground-soft: #f6f7f4;
  --display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --w: 1280px;
  /* Even all round and small enough to fit the rails' padding, so it is
     never clipped and never pools under the card. */
  --lift: 0 0 0 1px rgba(17, 19, 16, .06), 0 4px 18px rgba(17, 19, 16, .16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c0d0b;
    --paper-soft: #161812;
    --ink: #f2f4ee;
    --muted: #9ba295;
    --line: #262a22;
    --rule: #3a4034;
    --seam: #6a7163;
    --ground: #0c0d0b;
    --ground-soft: #161812;
    --accent: #63d63f;
    --accent-text: #7ee75d;
    --err: #ff8a80;
    --lift: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 18px rgba(0, 0, 0, .6);
  }
}
.inkband {
  --paper: #101210;
  --paper-soft: #181b14;
  --ink: #f2f4ee;
  --muted: #a8afa1;
  --line: #2c3026;
  --rule: #4a5040;
  --accent-text: #7ee75d;
  background: var(--paper);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .inkband {
    --paper: #1a1d16;
    --paper-soft: #23271c;
    --line: #363b2b;
    --rule: #4a5040;
  }
}

/* The preview's `--split` is a registered property so the before/after seam
   can animate; an unregistered custom property only jumps. */
@property --split {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 22px; }

.kicker {
  font: 800 12px/1 var(--display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.hl {
  background: linear-gradient(var(--accent), var(--accent)) left 52% / 100% 89% no-repeat;
  color: var(--hl-ink);
  padding: 0 0.14em; margin: 0 -0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a.arrow {
  color: var(--accent-text); text-decoration: none; white-space: nowrap;
  font: 700 14px/1 var(--display);
}
a.arrow:hover { text-decoration: underline; }

.ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- the preview strip ----------------------------------------------
   Says what this page is on every screenshot of it, and holds the switch
   that shows each viewer's prices without anything being wired up. */
.pstrip { background: #111310; color: #b9c0b2; font-size: 12.5px; }
.pstrip .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding-top: 8px; padding-bottom: 8px;
}
.pstrip b {
  font: 800 10.5px/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: #7ee75d;
}
.pstrip .as { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.seg {
  display: inline-flex; border: 1px solid #3a4034; border-radius: 999px; padding: 2px;
}
.seg button {
  border: 0; background: none; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  font: 600 12px/1.2 var(--body); color: #a8afa1;
}
.seg button:hover { color: #f2f4ee; }
.seg button[aria-pressed="true"] { background: #f2f4ee; color: #111310; }

/* ---- the marketplace header ------------------------------------------ */
header.mk {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.mk-bar { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  text-decoration: none; color: var(--ink);
}
.brand .logo {
  display: block; width: 62px; height: 28px;
  padding-right: 12px; border-right: 1px solid var(--rule); box-sizing: content-box;
  background-origin: content-box;
  background: url(/img/logo.svg) left center / contain no-repeat;
}
/* The Blueprints tool's own icon, in the Free plan's green it wears on the
   site's tool cards (Blueprint Maker is a Free tool). */
.bp-icon {
  width: 30px; height: 30px; flex: 0 0 auto; margin-left: 2px;
  background-color: var(--accent);
  -webkit-mask: url(/img/icons/blueprints.svg) center / contain no-repeat;
  mask: url(/img/icons/blueprints.svg) center / contain no-repeat;
}
.brand .name {
  font: 900 19px/1 var(--display); letter-spacing: -0.02em;
}
.brand .name small {
  display: block; margin-top: 4px;
  font: 800 9px/1 var(--display); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
@media (prefers-color-scheme: dark) {
  .brand .logo { background-image: url(/img/logo-dark.svg); }
}

/* The bar's own search. On the home page the hero's search does the job
   until it scrolls away, so this one waits for it (`.show-search`, set by
   the script) rather than offering two boxes at once. */
.mk-search {
  flex: 1 1 auto; max-width: 560px; height: 42px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted);
  transition: opacity .25s ease, visibility .25s;
}
.mk-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 15px/1 var(--body); color: var(--ink);
}
.mk-search input::placeholder { color: var(--muted); }
.mk-search:focus-within { border-color: var(--accent-text); }
header.mk[data-home]:not(.show-search) .mk-search { opacity: 0; visibility: hidden; }

.acct { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.acct > a.plain { color: var(--muted); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.acct > a.plain:hover { color: var(--ink); }
.nav-cta {
  background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap;
  border: 2px solid var(--ink); border-radius: 8px;
  font: 700 13.5px/1.2 var(--display); padding: 6px 13px;
}
.nav-cta:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 14px 26px; border-radius: 8px; border: 0; cursor: pointer;
  text-decoration: none; font: 700 15px/1.2 var(--display);
}
.btn.primary { background: var(--accent); color: var(--hl-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); }
.btn.sm { padding: 8px 14px; font-size: 13.5px; }

/* Signed in: the month's allowance where Sign in was. The pill is the plan's
   own colour, as on the pricing cards. */
.allow {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 13px; color: var(--muted);
}
.allow b { color: var(--ink); font-weight: 700; }
.allow .meter {
  width: 64px; height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--line);
}
.allow .meter i { display: block; height: 100%; background: var(--tc); border-radius: inherit; }
.plan-pill {
  display: inline-block; padding: 4px 7px; border-radius: 4px;
  background: var(--tc); color: var(--tt);
  font: 800 9.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--paper-soft); border: 1px solid var(--rule);
  font: 800 12px/1 var(--display); color: var(--ink);
}

/* The department bar: text, like the stores it follows, with the ledger's
   green rule under the department you are in. */
nav.depts {
  display: flex; flex-wrap: wrap; gap: 0 2px; min-height: 46px; align-items: stretch;
}
nav.depts::-webkit-scrollbar { display: none; }
/* More collections than fit carry on onto a second row (Dan): nothing in
   the bar is ever out of reach of a mouse. A phone scrolls it instead. */
nav.depts a {
  display: flex; align-items: center; height: 46px; padding: 0 12px; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  font: 600 14px/1 var(--body);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
nav.depts a:first-child { padding-left: 0; }
nav.depts a:hover { color: var(--ink); }
nav.depts a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
nav.depts a.free { margin-left: auto; color: var(--accent-text); }

/* ---- hero -------------------------------------------------------------
   Always dark, as the site's hero is, with the catalog drifting past on the
   right: what is for sale is the picture, so the picture is the stock. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -12%; top: -40%; width: 64%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(76, 191, 53, .2), transparent 72%);
  filter: blur(20px);
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  min-height: 580px; align-items: center;
  padding-top: 72px; padding-bottom: 84px;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  margin-top: 18px; max-width: 13ch;
  font: 900 clamp(34px, 5.4vw, 66px)/1.04 var(--display); letter-spacing: -0.03em;
}
.hero .lede { margin-top: 20px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: var(--muted); }

.bigsearch {
  margin-top: 32px; max-width: 640px; height: 62px;
  display: flex; align-items: stretch;
  background: #ffffff; color: #111310; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 22px 48px rgba(0, 0, 0, .4);
}
.bigsearch label.dept {
  position: relative; display: flex; align-items: center;
  background: #f6f7f4; border-right: 1px solid #e5e7e1;
}
.bigsearch select {
  appearance: none; -webkit-appearance: none; height: 100%; cursor: pointer;
  border: 0; background: none; padding: 0 36px 0 18px;
  font: 600 14px/1 var(--body); color: #111310;
}
.bigsearch label.dept svg {
  position: absolute; right: 13px; width: 14px; height: 14px; pointer-events: none; color: #5b6058;
}
.bigsearch .field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 18px; min-width: 0; color: #5b6058; }
.bigsearch input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none;
  font: 17px/1 var(--body); color: #111310;
}
.bigsearch input::placeholder { color: #7a8075; }
.bigsearch button {
  margin: 7px; padding: 0 22px; border: 0; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  background: #4cbf35; color: #0b1f07; font: 700 15px/1 var(--display);
}
.bigsearch button:hover { background: #43ab2e; }

.trending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.trending .l { font-size: 13px; color: var(--muted); margin-right: 2px; }
.trending a {
  padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.trending a:hover { border-color: var(--accent-text); color: var(--accent-text); }

.promise {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.promise span { display: inline-flex; align-items: center; gap: 8px; }
.promise svg { width: 16px; height: 16px; color: var(--accent-text); }
.promise b { color: var(--ink); font-weight: 700; }

/* The drifting catalog: three columns of previews, each a doubled list that
   travels half its own height and starts again, so the loop has no seam.
   Tiles carry their gap as a margin for the same reason: with `gap` the two
   halves would be a half-gap out. */
.mosaic {
  position: absolute; z-index: 1; top: -60px; bottom: -60px; right: -2vw;
  width: min(46vw, 700px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  transform: rotate(-6deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}
.mcol { display: flex; flex-direction: column; }
.mcol:nth-child(2) { margin-top: -140px; }
.mcol:nth-child(3) { margin-top: -60px; }
.mtile { margin-bottom: 16px; position: relative; }
.mtile .pv { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: no-preference) {
  .mcol { animation: drift 70s linear infinite; }
  .mcol:nth-child(2) { animation-duration: 90s; animation-direction: reverse; }
  .mcol:nth-child(3) { animation-duration: 80s; }
}
@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ---- sections ----------------------------------------------------------- */
.sec { padding: 0 0 60px; }
.sec > .wrap { padding-top: 44px; }
.ruled > .wrap { border-top: 2px solid var(--rule); }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 24px;
}
.sec-head .kicker { display: block; margin-bottom: 10px; }
.sec-head h2 { font: 800 clamp(24px, 2.8vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; }
.sec-head .side { display: flex; align-items: center; gap: 16px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  font: 600 13px/1.2 var(--body); color: var(--muted);
}
.chips button:hover { color: var(--ink); border-color: var(--rule); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- departments ---------------------------------------------------------
   Each tile wears its department's colour the way a plan card wears its
   plan's: a stripe where the picture meets the paper, and the glow on hover. */
/* Eleven collections fill three rows of four with nothing over when the
   first, Planning Templates, takes two places: it is what T6FV is known
   for, so it is the one the grid features. */
/* Twelve collections are three even rows of four: the first tile's double
   width went when Portfolio made the twelfth, which would have stood alone. */
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dtile {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dtile .pv { border-radius: 0; }
.dtile .meta { padding: 12px 14px 14px; border-top: 3px solid var(--dc); }
.dtile .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dtile b { font: 800 16px/1.2 var(--display); letter-spacing: -0.01em; }
/* What a card or collection opens in, anchored to the picture's top right
   (Dan): blueprints.js, toolPill. */
.tpill {
  position: absolute; top: 9px; right: 9px; z-index: 4;
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 999px;
  background: rgba(10, 11, 9, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ffffff; font: 800 10.5px/1 var(--display);
}
.tpill .ti { width: 15px; height: 15px; background-color: #ffffff; }
.dtile .k { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* A line that scrolls itself when it does not fit (blueprints.js,
   autoScroll), fading at whichever edge has more to show. */
.autoscroll {
  white-space: nowrap; overflow-x: auto; overflow-y: hidden; text-overflow: clip !important;
  scrollbar-width: none;
}
.autoscroll::-webkit-scrollbar { display: none; }
.autoscroll { transition: opacity .2s ease; }
.autoscroll.resetting { opacity: 0; }
.autoscroll.over { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.autoscroll.over.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.dtile:hover {
  transform: translateY(-3px); border-color: var(--dc);
  box-shadow: 0 0 0 1px var(--dc), 0 2px 18px color-mix(in srgb, var(--dc) 30%, transparent);
}

/* ---- the asset card ------------------------------------------------------
   The preview is the card; the words sit under it on the page's own paper,
   with no box around them, so a grid reads as a wall of pictures and the
   ledger's type does the labelling. */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }
.card { display: flex; flex-direction: column; min-width: 0; }
.card .media { position: relative; }
.card .media > a { display: block; border-radius: 10px; }
.card .media .pv {
  border-radius: 10px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.card:hover .media .pv { transform: translateY(-3px); box-shadow: var(--lift); }
.card .body { display: flex; flex-direction: column; gap: 5px; padding: 13px 1px 0; flex: 1; }
.card .kind {
  font: 800 10.5px/1.2 var(--display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text);
}
.card h3 { font: 800 15.5px/1.3 var(--display); letter-spacing: -0.01em; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card .maker { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); min-width: 0; }
.card .maker a { color: var(--ink); text-decoration: none; }
.card .maker a:hover { text-decoration: underline; }
.t6 {
  display: inline-block; width: 36px; height: 16px; flex: 0 0 auto;
  background: url(/img/logo.svg) left center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .t6 { background-image: url(/img/logo-dark.svg); }
}
.comm {
  padding: 2px 6px; border: 1px solid var(--rule); border-radius: 4px;
  font: 800 9px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.card .foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.ti {
  width: 16px; height: 16px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* What it costs this viewer. The price is the page's ink; a download from
   the allowance is a pill in the plan's colour, the same fill the pricing
   cards and tool chips use for that plan. */
.price { font: 800 15px/1 var(--display); white-space: nowrap; }
.get {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 5px 9px 5px 7px; border-radius: 6px;
  background: var(--tc); color: var(--tt);
  font: 800 11px/1 var(--display); letter-spacing: .03em;
}
.get svg { width: 13px; height: 13px; }
.withplan { font: 700 12.5px/1 var(--body); color: var(--muted); white-space: nowrap; }
.signin {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 700 12.5px/1 var(--body); color: var(--muted);
}
.signin svg { width: 13px; height: 13px; }

/* Over the preview: a kit's count, the Blueprint tag, the small AI tag
   that only photoreal items carry (blueprints.js, aiLabel, says why), and on
   hover the save button. */
.ai, .tagpill, .kitb {
  position: absolute; top: 9px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 999px;
  font: 800 9px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.ai, .tagpill, .kitb { left: 9px; }
.ai {
  padding: 3px 6px; font-size: 8.5px; color: #ffffff; background: rgba(10, 11, 9, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tagpill { color: #ffffff; background: rgba(10, 11, 9, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.kitb { background: var(--accent); color: var(--hl-ink); }
.acts {
  position: absolute; right: 9px; bottom: 9px; z-index: 5;
  display: flex; gap: 6px; opacity: 0; transition: opacity .2s ease;
}
.card:hover .acts, .card:focus-within .acts { opacity: 1; }
.acts button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: #111310;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.acts button svg { width: 15px; height: 15px; }

/* ---- previews ------------------------------------------------------------
   Stand-ins for what the server will render, drawn from the site's own
   photos, CSS and SVG. Each sizes its overlay type in container units, so
   the same preview reads the same in a drifting hero tile, a department tile
   and a card. */
.pv {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; container-type: inline-size;
  background: #0d0e0c; color: #ffffff;
}
.pv.r43 { aspect-ratio: 4 / 3; }
.pv.r11 { aspect-ratio: 1; }
.pv.r45 { aspect-ratio: 4 / 5; }
.pv img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}

/* Before | after: one still, the right half graded. */
.pv-ba { --split: 50%; }
.pv-ba .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split)); }
.pv-ba .tint { position: absolute; inset: 0; mix-blend-mode: soft-light; }
.pv-ba .seam {
  position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2;
  width: 2px; margin-left: -1px; background: #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .45);
}
.pv-ba .seam::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 7.5cqw; height: 7.5cqw; min-width: 20px; min-height: 20px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111310'%3E%3Cpath d='M9 6 3 12l6 6zM15 6l6 6-6 6z'/%3E%3C/svg%3E") center / 64% no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.pv-ba .lbl {
  position: absolute; bottom: 4.5cqw; z-index: 3;
  font: 800 max(8px, 2.6cqw)/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.pv-ba .lbl.b { left: 4.5cqw; }
.pv-ba .lbl.a { right: 4.5cqw; }
.g-dusk .after img { filter: saturate(1.3) contrast(1.12) sepia(.2); }
.g-dusk .tint { background: linear-gradient(185deg, rgba(255, 146, 64, .75), rgba(0, 118, 140, .8)); }
.g-log .before { filter: saturate(.4) contrast(.58) brightness(1.18); }
.g-log .after img { filter: contrast(1.08) saturate(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .card:hover .pv-ba, .dtile:hover .pv-ba { animation: sweep 2.4s ease-in-out infinite alternate; }
}
@keyframes sweep {
  from { --split: 22%; }
  to   { --split: 78%; }
}

/* Photo effects: a light leak and grain over a still. */
.pv-fx .leak {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(55% 75% at 0% 25%, rgba(255, 96, 20, .9), transparent 62%),
    radial-gradient(45% 60% at 100% 95%, rgba(255, 40, 90, .7), transparent 60%),
    radial-gradient(30% 40% at 85% 10%, rgba(255, 210, 90, .5), transparent 70%);
}
.pv-fx .grain, .pv-texture .grain {
  position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lower thirds, titles and openers: live type over a still. */
.pv-lower img { filter: brightness(.82); }
.lt { position: absolute; left: 6cqw; bottom: 9cqw; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.lt .nm { font: 900 6.4cqw/1 var(--display); letter-spacing: -0.01em; padding: 1.6cqw 2.6cqw; }
.lt .rl { font: 600 3cqw/1 var(--body); padding: 1.3cqw 2.6cqw; }
.lt-slab .nm { background: #ffffff; color: #111310; }
.lt-slab .rl { background: #4cbf35; color: #0b1f07; }
.lt-neon { padding-left: 2.4cqw; border-left: .9cqw solid #ff2bd6; box-shadow: -1.4cqw 0 2.4cqw -1.2cqw #ff2bd6; }
.lt-neon .nm { padding: 0 0 1cqw; color: #ffffff; text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 0 1.6cqw rgba(255, 43, 214, .9), 0 0 4cqw rgba(255, 43, 214, .5); }
.lt-neon .rl { padding: 0; color: #7ff3ff; text-transform: uppercase; letter-spacing: .2em; font-size: 2.6cqw;
  text-shadow: 0 0 1.4cqw rgba(127, 243, 255, .8); }

.pv-opener .bg { filter: blur(10px) brightness(.45) saturate(1.3); transform: scale(1.15); }
.pv-opener .phone {
  position: absolute; top: 7%; bottom: 7%; left: 50%; transform: translateX(-50%);
  aspect-ratio: 9 / 16; border-radius: 3cqw; overflow: hidden;
  box-shadow: 0 0 0 .6cqw rgba(255, 255, 255, .22), 0 3cqw 6cqw rgba(0, 0, 0, .5);
}
.pv-opener .phone img { filter: brightness(.55); }
.pv-opener .word {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center;
  font: 900 6.6cqw/.92 var(--display); text-transform: uppercase; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 30%, #ffc107 60%, #ff7a00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Music and sound: the waveform is the picture. The played part is lit. */
.pv-wave, .pv-sfx {
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--hue) 42%, #0c0d0b), transparent 62%),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--hue) 18%, #0c0d0b), #0c0d0b 75%);
}
.pv-wave svg.wf, .pv-sfx svg.wf {
  position: absolute; left: 6cqw; right: 6cqw; top: 30%; height: 42%; width: calc(100% - 12cqw);
}
.wf rect { fill: color-mix(in srgb, var(--hue) 45%, #3a3d36); }
.wf rect.on { fill: var(--hue); }
.pv .play {
  position: absolute; right: 5cqw; bottom: 4cqw; z-index: 2;
  width: max(26px, 11cqw); height: max(26px, 11cqw); border-radius: 50%;
  display: grid; place-items: center; background: #ffffff; color: #111310;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.pv .play svg { width: 42%; height: 42%; margin-left: 8%; }
.pv .meta {
  position: absolute; left: 6cqw; bottom: 5.5cqw; z-index: 2;
  font: 600 max(10px, 3.2cqw)/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: rgba(255, 255, 255, .82); letter-spacing: .02em;
}
.pv .meta.r { left: auto; right: 6cqw; }

/* Stock video: a frame, a play mark and the facts a buyer filters by. */
.pv-video .ring {
  position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: max(34px, 14cqw); height: max(34px, 14cqw); border-radius: 50%;
  display: grid; place-items: center; color: #ffffff;
  background: rgba(10, 11, 9, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pv-video .ring svg { width: 38%; height: 38%; margin-left: 8%; }
.pv-video .meta, .pv-texture .meta { left: auto; right: 4.5cqw; bottom: 4.5cqw;
  padding: 1.2cqw 2cqw; border-radius: 1.2cqw; background: rgba(10, 11, 9, .62); }

/* Textures: the site's own holographic splash, tiled with its seams shown. */
.pv-texture .tex {
  position: absolute; inset: 0;
  background: url(/img/splash.jpg) 0 0 / 50% 50% repeat;
  filter: saturate(1.25) contrast(1.05);
}
.pv-texture .tex::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent calc(50% - .5px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + .5px));
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .7;
}

/* Fonts: a specimen on the page's own paper. */
.pv-font { background: var(--paper-soft); color: var(--ink); }
.dtile .pv-font, .mtile .pv-font { background: #f3f1ea; color: #111310; }
.pv-font .spec {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 6cqw;
}
.pv-font .spec span { display: block; white-space: nowrap; }
.pv-font .spec small {
  display: block; margin-top: 3cqw;
  font: 600 max(10px, 3cqw)/1 var(--body); letter-spacing: .02em; opacity: .62;
}
.f-grotesk { font: 900 13cqw/1 "Arial Black", "Helvetica Neue", Helvetica, sans-serif; letter-spacing: -0.05em; }
.f-didone { font: 400 30cqw/1 Didot, "Bodoni 72", "Bodoni MT", Georgia, serif; letter-spacing: -0.02em; }

/* Lighting setups: the plot itself, as the Lighting Diagram draws it. */
.pv-plot { background: #212121; }
.pv-plot img { object-fit: cover; object-position: 50% 45%; }
/* On a card, the look it makes (a third) beside the plot (two thirds). The
   plot is contained, not cropped: its labels run to its edges. */
.pv-rig { display: grid; grid-template-columns: 1fr 2fr; background: #222222; }
/* The two halves only: the pill and labels over the card are spans too. */
.pv-rig > .ref, .pv-rig > .plot { position: relative; overflow: hidden; }
.pv-rig .ref { border-right: 2px solid #0d0e0c; }
.pv-rig .plot img { object-fit: contain; transform: scale(1.12); }

/* Blueprints: the job's photo with what the Blueprint brings. */
.pv-blueprint::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .78));
}
.pv-blueprint .bchips {
  position: absolute; left: min(4.5cqw, 16px); right: 4.5cqw; bottom: min(4.5cqw, 16px); z-index: 2;
  display: flex; flex-wrap: wrap; gap: min(1.6cqw, 7px);
}
.pv-blueprint .bchips span {
  padding: clamp(3px, 1.2cqw, 6px) clamp(6px, 2.2cqw, 11px); border-radius: 99px;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 clamp(9px, 2.8cqw, 12.5px)/1 var(--body); color: #ffffff; white-space: nowrap;
}

/* Documents: two pages, one of them a table. */
.pv-doc { background: linear-gradient(140deg, color-mix(in srgb, var(--hue) 55%, #ffffff), var(--hue)); }
.pv-doc .pg {
  position: absolute; width: 36%; aspect-ratio: 210 / 297; padding: 4cqw 3.6cqw;
  background: #ffffff; border-radius: 1cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .22);
  display: flex; flex-direction: column; gap: 1.6cqw;
}
.pv-doc .p1 { left: 18%; top: 16%; transform: rotate(-5deg); }
.pv-doc .p2 { left: 44%; top: 10%; transform: rotate(3deg); }
.pv-doc .pg > i { display: block; height: 1.3cqw; width: 100%; border-radius: .6cqw; background: #dfe3da; }
.pv-doc .pg > i.h { height: 2.6cqw; width: 70%; background: #111310; margin-bottom: 1cqw; }
.pv-doc .pg > i.s { width: 62%; }
.pv-doc .tb { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.pv-doc .tb i { display: block; height: 3.4cqw; border-radius: .4cqw; background: #eef0ea; }
.pv-doc .tb i:nth-child(-n+3) { background: var(--hue); }

/* Presentations: a deck, three slides deep. */
/* A portfolio page: the top of the real design, in a browser window. */
.pv-page { background: #e9ebe6; }
.pv-page .pbar, .ptwin .pbar {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 7.5cqw; max-height: 26px;
  display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.6cqw;
  background: #20231f; border-bottom: 1px solid #000;
}
.pv-page .pbar i, .ptwin .pbar i { width: 2cqw; height: 2cqw; max-width: 9px; max-height: 9px; border-radius: 50%; background: #4a5045; }
.pv-page .pbar b, .ptwin .pbar b {
  margin-left: 2cqw; flex: 1; max-width: 60%; padding: .5cqw 2cqw; border-radius: 99px; background: #111310;
  font: 600 clamp(7px, 2.6cqw, 11px)/1.2 var(--body); color: #a8afa1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-page img { top: min(7.5cqw, 26px); height: calc(100% - min(7.5cqw, 26px)); object-position: top center; }

/* The try-it frame on a portfolio page's item page. */
.pagetry { display: grid; gap: 12px; }
.ptbar { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.pagetry .seg { border-color: var(--rule); background: var(--paper); }
.pagetry .seg button { color: var(--muted); }
.pagetry .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ptstage { display: grid; justify-items: center; }
.ptwin { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #20231f; padding-top: 26px; container-type: inline-size; }
.ptwin .pbar { height: 26px; }
.ptstage[data-dev="phone"] .ptwin { width: min(100%, 404px); border-radius: 30px; padding: 14px 7px; }
.ptstage[data-dev="phone"] .pbar { display: none; }
.ptview { position: relative; overflow: hidden; background: #fff; }
.ptstage[data-dev="phone"] .ptview { border-radius: 22px; }
.ptview iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.pagetry .hint { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.ptfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.ptfoot .btn svg, .gfull svg { margin-right: 6px; vertical-align: -3px; }
.igal .gfull { margin-top: 10px; }
.igal .gmain img { cursor: zoom-in; }
.igal .gmain .pv-ba img { cursor: inherit; }

/* Full screen: a Portfolio design's sample page, or an item's pictures. */
html.fsv-open, html.fsv-open body { overflow: hidden; }
.fsv { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr;
  background: rgba(8, 9, 8, 0.96); color: #f2f4ee; }
.fsv[hidden] { display: none; }
.fsv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 64px 10px 16px; min-height: 60px; position: relative; }
.fsv-title { margin: 0; font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsv-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.fsv-count { font-size: 13px; color: #b9bdb4; }
.fsv-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(242, 244, 238, 0.35); background: rgba(242, 244, 238, 0.08); color: #f2f4ee;
  font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fsv-close:hover, .fsv-close:focus-visible { background: #f2f4ee; color: #111310; }
.fsv-body { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.fsv-stage { position: absolute; inset: 0; overflow: hidden; }
.fsv-stage iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.fsv-stage[data-dev="phone"] iframe { border-radius: 18px 18px 0 0; }
.fsv-img { max-width: calc(100% - 24px); max-height: calc(100% - 24px); object-fit: contain; }
.fsv-step { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(242, 244, 238, 0.35); background: rgba(8, 9, 8, 0.6); color: #f2f4ee; font-size: 30px;
  line-height: 1; cursor: pointer; }
.fsv-step:hover, .fsv-step:focus-visible { background: #f2f4ee; color: #111310; }
.fsv-step.prev { left: 12px; }
.fsv-step.next { right: 12px; }
@media (max-width: 600px) {
  .fsv-top { padding: 8px 60px 8px 12px; }
  .fsv-title { flex-basis: 100%; }
  .fsv-step { width: 40px; height: 40px; font-size: 24px; }
  .fsv-step.prev { left: 6px; }
  .fsv-step.next { right: 6px; }
}
.dlas { margin: 14px 0 6px; font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.brow.three .btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
.brow.three .btn svg { display: none; }

.pv-deck { background: linear-gradient(140deg, color-mix(in srgb, var(--hue) 70%, #ffffff), var(--hue)); }
.pv-deck .sl {
  position: absolute; width: 58%; aspect-ratio: 16 / 9; border-radius: 1.6cqw;
  background: #ffffff; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .25);
}
.pv-deck .s1 { left: 30%; top: 12%; transform: rotate(6deg); opacity: .7; }
.pv-deck .s2 { left: 22%; top: 20%; transform: rotate(2deg); opacity: .88; }
.pv-deck .s3 { left: 14%; top: 30%; padding: 4cqw; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; }
.pv-deck .s3 i { display: block; border-radius: .8cqw; }
.pv-deck .s3 .t { height: 3.6cqw; width: 90%; background: #111310; }
.pv-deck .s3 .u { height: 1.6cqw; width: 70%; margin-top: 1.6cqw; background: #cdd2c9; }
.pv-deck .s3 .v { height: 1.6cqw; width: 54%; margin-top: 1cqw; background: #cdd2c9; }
.pv-deck .s3 .img { grid-row: span 3; background: linear-gradient(160deg, var(--hue), #111310); }

/* ---- shelves ------------------------------------------------------------- */
/* A shelf is a carousel at every width: four to a view on a desk, more to
   scroll to, with buttons on its edges (blueprints.js, railNav). A box that
   scrolls sideways clips up and down too, so the rail is padded by the room
   the hover lift and glow need and gives it back with a negative margin. */
.grid.rail {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  margin: -18px -22px -26px; padding: 18px 22px 34px; scroll-padding: 0 22px;
}
.grid.rail::-webkit-scrollbar { display: none; }
.grid.rail > .card { scroll-snap-align: start; }
.railbox { position: relative; }
.railbox .edge {
  position: absolute; top: var(--mid, 40%); z-index: 6; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0, 0, 0, .22);
}
.railbox .edge[hidden] { display: none; }
.railbox .edge svg { width: 18px; height: 18px; }
.railbox .edge:hover { background: var(--ink); color: var(--paper); }
.railbox .edge.back { left: -23px; }
.railbox .edge.on { right: -23px; }
/* Dragging with a mouse: the hand says the row moves, and snapping waits
   until the drag ends so the row follows the pointer. */
.grid.rail, .dgrid { cursor: grab; }
.dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
.dragging a, .dragging img { pointer-events: none; }
.soft { background: var(--paper-soft); }
.sec.soft, .sec.community { padding-bottom: 68px; }
.sec.soft > .wrap, .sec.community > .wrap { padding-top: 60px; }
.sec-head .sub { margin-top: 12px; max-width: 60ch; font-size: 16px; color: var(--muted); }
/* The plan picker's .sub (a bordered option row, below) shares the class name;
   a heading's sub is plain text. */
.sec-head .sub, .chead .sub { display: block; padding: 0; border: 0; border-radius: 0; background: none; cursor: auto; }
.fineprint { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.fineprint a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.fineprint a:hover { text-decoration: underline; }
.g-bleach .after img { filter: saturate(.42) contrast(1.42) brightness(1.04); }
.g-mono .after img { filter: grayscale(1) contrast(1.3) brightness(1.02); }
.g-film .after img { filter: sepia(.32) saturate(.85) contrast(.86) brightness(1.08); }
.g-warm .after img { filter: sepia(.28) saturate(1.35) contrast(1.06) brightness(1.04) hue-rotate(-8deg); }
.g-cool .after img { filter: saturate(.9) contrast(1.12) hue-rotate(18deg) brightness(.94); }
.g-pastel .after img { filter: saturate(.7) contrast(.82) brightness(1.12) sepia(.12); }

/* Music as a list, the way music is bought: you listen down a column, and
   the facts you filter by (tempo, key, length) line up to be compared. */
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 2fr) 64px 76px 48px 112px 34px;
  padding: 12px 10px; border-bottom: 1px solid var(--line);
}
.track:hover { background: var(--paper-soft); }
.track .th {
  width: 52px; height: 52px; border: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: #ffffff;
  background: linear-gradient(140deg, var(--hue), color-mix(in srgb, var(--hue) 30%, #0c0d0b));
}
.track .th svg { width: 18px; height: 18px; margin-left: 2px; }
.track .tt { min-width: 0; }
.track .tt b { display: block; font: 800 15px/1.25 var(--display); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .tt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .tt .m { display: none; }
.track .wf { display: block; width: 100%; height: 34px; }
.track .wf rect { fill: var(--rule); }
.track .wf rect.on { fill: var(--hue); }
.track .num { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); white-space: nowrap; }
.track .pr { justify-self: end; }
.track .bm {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--muted);
  border: 1px solid var(--line);
}
.track .bm:hover { color: var(--ink); border-color: var(--rule); }
.track .bm svg { width: 15px; height: 15px; }

/* Community: the one dark band below the hero, as the home page keeps one
   for the AI, so the shop has a rhythm and the people's work stands apart
   from T6FV's own. */
.community .card .maker a { color: var(--ink); }
.share {
  margin-top: 44px; padding: 26px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft);
}
.share h3 { font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; }
.share p { margin-top: 6px; max-width: 64ch; font-size: 15px; color: var(--muted); }

/* ---- plans ----------------------------------------------------------------
   The home page's plan cards (a stripe in the plan's colour, Pro featured),
   led by the number this page is about: downloads a month. */
.plans > .wrap { padding-top: 60px; border-top: 2px solid var(--rule); }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 14px; }
.pcard {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 24px; background: var(--paper);
  border: 1px solid var(--line); border-top: 4px solid var(--tc, var(--ink)); border-radius: 10px;
}
.pcard h3 { font: 800 19px/1.2 var(--display); }
.pcard .dl { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard .dl b { font: 900 46px/1 var(--display); letter-spacing: -0.03em; }
.pcard .dl span { font-size: 14px; color: var(--muted); }
.pcard .cost { margin-top: 10px; font: 800 14px/1.3 var(--display); }
/* Where a download count was: the plan's tools as icon tiles, then a caption. */
.dl-tools { margin-top: 16px; }
.dl-tools.small { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.picons { display: flex; gap: 8px; }
.pti {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tc, var(--ink)) 14%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--ink)) 30%, transparent);
}
.pti .ti { width: 24px; height: 24px; background-color: var(--ink); }
.pti.more { font: 800 14px/1 var(--display); color: var(--ink); }
.dl-tools.small .pti { width: 38px; height: 38px; border-radius: 9px; }
.dl-tools.small .pti .ti { width: 20px; height: 20px; }
.pcap { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.pcap b { color: var(--ink); font-weight: 700; }
.pcard ul:not(.pt-list) { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--muted); }
.pcard ul:not(.pt-list) li { position: relative; padding-left: 22px; }
.pcard ul:not(.pt-list) li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px;
  border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}
.pcard .btn { margin-top: auto; justify-content: center; }
.btn.ghost { background: none; border: 2px solid var(--ink); color: var(--ink); padding: 12px 24px; }
.btn.ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.pcard.featured {
  border: 2px solid var(--tc); border-top-width: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 12%, transparent), 0 18px 40px color-mix(in srgb, var(--tc) 20%, transparent);
}
.pcard .trial, .pcard .mine-tag {
  position: absolute; top: -13px; padding: 6px 9px; border-radius: 999px;
  font: 800 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.pcard .trial { right: 18px; background: var(--tc); color: var(--tt); }
.pcard .mine-tag { display: none; left: 18px; background: var(--ink); color: var(--paper); }
.pcard.mine .mine-tag { display: inline-block; }
.pcard.mine { box-shadow: 0 0 0 2px var(--ink); }
.pcard.mine.featured { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px color-mix(in srgb, var(--tc) 20%, transparent); }

/* ---- footer: the site's, on the splash art under black ------------------ */
.mkfoot { position: relative; isolation: isolate; background: #0a0b09; font-size: 13.5px; color: var(--muted); }
.mkfoot::before, .mkfoot::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.mkfoot::before { background: url(/img/splash.jpg) center / cover no-repeat; }
.mkfoot::after { background: rgba(0, 0, 0, .86); }
.mkfoot .cols {
  display: grid; grid-template-columns: 1.3fr 1.5fr 1fr 1fr; gap: 36px;
  padding-top: 60px; padding-bottom: 40px;
}
.mkfoot .brand .logo { background-image: url(/img/logo-dark.svg); }
.mkfoot .fbrand p { margin-top: 16px; max-width: 30ch; }
.mkfoot nav { display: grid; align-content: start; gap: 8px; }
.mkfoot nav[aria-label="Collections"] { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.mkfoot nav[aria-label="Collections"] h4 { grid-column: 1 / -1; }
.mkfoot h4 {
  margin: 0 0 6px; font: 800 11px/1 var(--display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.mkfoot a { color: #c9cfc2; text-decoration: none; }
.mkfoot a:hover { color: #ffffff; text-decoration: underline; }
.mkfoot .legal { padding-top: 20px; padding-bottom: 36px; border-top: 1px solid var(--line); font-size: 12.5px; }
.mkfoot .receipts { margin-top: 8px; font-size: 12px; opacity: .8; }

/* ---- browse and search ---------------------------------------------------
   A collection's own page, and search results: the page head, then the
   facets down the side and the results beside them. */
.chead { padding: 34px 0 26px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.chead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 14px; }
.chead h1 { font: 900 clamp(32px, 4.4vw, 52px)/1.04 var(--display); letter-spacing: -0.03em; }
.chead .sub { margin-top: 10px; max-width: 64ch; font-size: 16.5px; color: var(--muted); }
.chead .total { font-size: 14px; color: var(--muted); white-space: nowrap; }
.chead .total b { font: 800 22px/1 var(--display); color: var(--ink); }
.chead .kinds { margin-top: 22px; }
.chead .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dc); margin-right: 10px; vertical-align: .2em; }

/* The facets are a column on the left that the Filters button shows and
   hides (Dan, 2026-10-31); open to start with on a wide screen, and the
   results take the room when it is shut. */
.browse .layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  padding-top: 28px; padding-bottom: 72px;
}
.fshow .browse .layout { grid-template-columns: 250px minmax(0, 1fr); }
.filters { display: none; }
.fshow .filters {
  display: block;
  position: sticky; top: 132px; align-self: start;
  max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin;
  padding-right: 6px;
}
.fhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.fhead b { font: 800 16px/1 var(--display); }
.fclear { border: 0; background: none; cursor: pointer; color: var(--accent-text); font: 700 13px/1 var(--body); }
.fclear[hidden] { display: none; }
.fclose { display: none; }
.fgroup { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 14px; min-width: 0; }
.fgroup legend {
  float: left; width: 100%; margin-bottom: 10px; padding: 0;
  font: 800 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.fopt {
  clear: both; display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer;
  font-size: 14px; color: var(--ink);
}
.fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fopt .box {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: 4px;
  border: 1.5px solid var(--rule); background: var(--paper);
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.fopt input:checked + .box { background: var(--accent); border-color: var(--accent); }
.fopt input:checked + .box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--hl-ink); border-bottom: 2px solid var(--hl-ink); transform: rotate(-45deg);
}
.fopt input:focus-visible + .box { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.fopt:hover .box { border-color: var(--ink); }
.fopt .t { flex: 1; min-width: 0; }
.fopt .c { font-size: 12.5px; color: var(--muted); }
.fopt.none { opacity: .45; }
.fopt.more { display: none; }
.fmore {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 13px/1.4 var(--body); color: var(--accent-text);
}
.fmore:hover { text-decoration: underline; }
/* Beside the facets the list is narrower, so the title takes the room the
   waveform gives up. */
.browse .track { grid-template-columns: 52px minmax(0, 1.7fr) minmax(0, 1.3fr) 64px 70px 44px 104px 34px; }
.fdone { display: none; }

.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.toolbar .rc { font-size: 14px; color: var(--muted); }
.toolbar .active { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.achip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 8px 5px 11px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--paper); font: 600 12.5px/1.2 var(--body);
}
.achip span { font-size: 15px; line-height: 1; opacity: .7; }
.achip:hover span { opacity: 1; }
.sortby { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.sortby select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 8px 32px 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6058' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  font: 600 13.5px/1.2 var(--body); color: var(--ink);
}
.fbtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper);
  font: 700 13.5px/1.2 var(--body); color: var(--ink);
}
.fbtn svg { width: 16px; height: 16px; }
.fbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fbtn b:empty { display: none; }
.fbtn b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  background: var(--accent); color: var(--hl-ink); font: 800 11px/1 var(--display);
}
.grid.g3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fshow .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g3 > .card { display: flex; }

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 44px; }
.pager.top { justify-content: flex-end; margin: -6px 0 20px; }
.pager.top a, .pager.top span { min-width: 34px; height: 34px; font-size: 13px; }
.pager .of { display: none; padding: 0 12px; border: 0; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pager a[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.pager[hidden] { display: none; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px;
  display: grid; place-items: center; text-decoration: none;
  font: 700 14px/1 var(--body); color: var(--ink); border: 1px solid var(--line);
}
.pager a:hover { border-color: var(--ink); }
.pager [aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager span.gap { border: 0; min-width: 20px; color: var(--muted); }
.pager svg { width: 16px; height: 16px; }

/* Nothing found: say so plainly, offer the way back, and show what other
   people are finding instead of an empty page. */
.empty { display: none; padding: 54px 24px 60px; text-align: center; border: 1px dashed var(--rule); border-radius: 12px; }
.is-empty .empty { display: block; }
.is-empty .pager { display: none; }
.empty .ill {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-soft); color: var(--muted);
}
.empty .ill svg { width: 28px; height: 28px; }
.empty h2 { font: 800 24px/1.2 var(--display); letter-spacing: -0.01em; }
.empty p { margin: 10px auto 0; max-width: 46ch; color: var(--muted); }
.empty .again { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty .again a {
  padding: 6px 13px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.empty .again a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.empty .btn { margin-top: 24px; }
.empty .btn[hidden] { display: none; }
.no-pool .browse .layout { grid-template-columns: 1fr; }
.no-pool .filters, .no-pool .fbtn, .no-pool .sortby, .no-pool .kinds, .no-pool .pager { display: none; }
.fscrim { display: none; }

/* ---- the item page --------------------------------------------------------
   The preview large on the left with something to try under it, the
   download panel on the right held in view, the facts underneath. */
.ihead { padding: 22px 0 0; }
.ilayout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px 44px;
  grid-template-areas: "gal panel" "rest panel";
  padding-top: 18px; padding-bottom: 64px; align-items: start;
}
.igal { grid-area: gal; min-width: 0; }
.ipanel { grid-area: panel; position: sticky; top: 128px; }
.irest { grid-area: rest; min-width: 0; }

.gmain { position: relative; }
.gmain .pv { border-radius: 12px; }
.gmain .pv-ba .lbl { font-size: 11px; bottom: 16px; }
.gmain .pv-ba .lbl.b { left: 18px; } .gmain .pv-ba .lbl.a { right: 18px; }
.ba-live .pv-ba { cursor: ew-resize; touch-action: pan-y; }
/* Dragging the seam or a row of looks must not select the page: the
   browser's selection wash stayed over the looks until the next click. */
.ba-live, .looks { -webkit-user-select: none; user-select: none; }
.ba-live img, .looks img { -webkit-user-drag: none; }
.ba-live .pv-ba .seam::after { width: 44px; height: 44px; }
.gmain .hint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 6px 12px; border-radius: 999px; background: rgba(10, 11, 9, .6); color: #ffffff;
  font: 700 12px/1 var(--body); pointer-events: none;
}
.gmain.photo .pv.is-plot img { object-fit: contain; background: #212121; }
.gmain.photo .pv.is-plot::after, .gmain.photo .pv.is-plot .bchips { display: none; }
.looks {
  display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: none; background: transparent;
}
.looks::-webkit-scrollbar { display: none; }
.look {
  flex: 0 0 auto; width: 118px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 12px/1.3 var(--body); color: var(--muted);
}
.look .lt-img {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 6px;
  border-radius: 8px; box-shadow: 0 0 0 1px var(--line);
}
.look .lt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look .lt-img.plot { background: #212121; }
.look .lt-img.plot img { object-fit: contain; }
.look[aria-pressed="true"] { color: var(--ink); }
.look[aria-pressed="true"] .lt-img { box-shadow: 0 0 0 2px var(--ink); }
.look:hover .lt-img { box-shadow: 0 0 0 2px var(--rule); }

/* A track: a big player, and the edits under it. */
.player {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px;
  padding: 34px 32px 44px; border-radius: 12px; color: #ffffff;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hue) 45%, #0c0d0b), transparent 62%),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--hue) 22%, #0c0d0b), #0c0d0b 75%);
}
.big-play {
  width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: #ffffff; color: #111310;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.big-play svg { width: 30px; height: 30px; margin-left: 4px; }
.scrub { cursor: pointer; }
.scrub .wf { display: block; width: 100%; height: 120px; }
.player .wf rect { fill: color-mix(in srgb, var(--hue) 30%, #4a4d46); }
.player .wf rect.on { fill: var(--hue); }
.ptime {
  position: absolute; left: 128px; right: 32px; bottom: 16px; display: flex; justify-content: space-between;
  font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: rgba(255, 255, 255, .75);
}
.edits { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.edits li {
  display: grid; grid-template-columns: 36px minmax(0, 150px) minmax(0, 1fr) 48px; align-items: center; gap: 14px;
  padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.edits b { font-weight: 700; }
.edits li > span:last-child { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); text-align: right; }
.eplay {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.eplay svg { width: 13px; height: 13px; margin-left: 2px; }
.ew .wf { display: block; width: 100%; height: 26px; }
.ew .wf rect { fill: var(--rule); }
.ew .wf rect.on { fill: var(--hue); }

/* The download panel. */
.pbox {
  padding: 24px 24px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(17, 19, 16, .06);
}
.pbox .kind {
  font: 800 10.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.pbox h1 { margin-top: 8px; font: 900 27px/1.12 var(--display); letter-spacing: -0.02em; }
.pbox .maker { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.pbox .maker a { color: var(--ink); }
.buy { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.btn.wide { width: 100%; justify-content: center; }
.btn.wide svg { width: 17px; height: 17px; }
.brow { display: flex; gap: 8px; }
.brow .btn { width: auto; flex: 1 1 0; padding-left: 12px; padding-right: 12px; }
.brow .btn.primary { flex-grow: 1.7; }
.price-big { font: 900 40px/1 var(--display); letter-spacing: -0.03em; }
.price-big span, .free-big span { display: block; margin-top: 6px; font: 600 13.5px/1.2 var(--body); letter-spacing: 0; color: var(--muted); }
.free-big { font: 900 34px/1 var(--display); color: var(--accent-text); }
.buy .alt { font-size: 13.5px; color: var(--muted); }
.buy .alt b { color: var(--ink); }
.buy .alt a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.buy .alt a:hover { text-decoration: underline; }
.buy .alt.small { font-size: 12.5px; }
.incl { display: flex; align-items: center; gap: 10px; font: 700 14.5px/1.3 var(--body); }
.lockline, .owned { display: flex; align-items: flex-start; gap: 9px; font: 600 14.5px/1.45 var(--body); }
.lockline svg, .owned svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.owned { color: var(--accent-text); }
.pmeter span { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: var(--line); }
.pmeter i { display: block; height: 100%; border-radius: inherit; background: var(--tc); }
.pmeter p { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.pmeter b { color: var(--ink); }
.pacts { display: flex; gap: 8px; margin-top: 16px; }
.pacts button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper);
  font: 700 13px/1 var(--body); color: var(--ink);
}
.pacts button:hover { border-color: var(--rule); }
.pacts svg { width: 15px; height: 15px; }
.pacts button[aria-pressed="true"], .acts button[aria-pressed="true"], .track .bm[aria-pressed="true"] { color: var(--accent-text); }
.pacts button[aria-pressed="true"] svg, .acts button[aria-pressed="true"] svg, .track .bm[aria-pressed="true"] svg { fill: currentColor; }

/* Asking for an account: one dialog for save, buy and download. */
dialog.ask {
  width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
dialog.ask::backdrop { background: rgba(10, 11, 9, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ask-in { position: relative; padding: 30px 28px 24px; display: grid; gap: 12px; }
.ask-in .x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--ink); font-size: 20px; line-height: 1;
}
.ask-in .bp-icon { width: 36px; height: 36px; }
.ask-in h2 { font: 900 25px/1.15 var(--display); letter-spacing: -0.02em; }
.ask-in > p { color: var(--muted); font-size: 15px; }
.ask-in .trial {
  display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 6px; padding: 14px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, #9B5CF6 40%, var(--line));
  background: color-mix(in srgb, #9B5CF6 8%, var(--paper)); font-size: 14px;
}
.ask-in .trial .plan-pill { flex: 0 0 auto; margin-top: 2px; }
.ask-in .small { text-align: center; font-size: 13.5px; color: var(--muted); }
.subs { display: grid; gap: 8px; margin: 4px 0 6px; }
.sub {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.sub input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sub .plan-pill { min-width: 78px; text-align: center; }
.sub .sd { flex: 1; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.sub .sd b { font: 700 14.5px/1.3 var(--body); color: var(--ink); }
.sub .sd .st { font-size: 12px; line-height: 1.35; }
.sub .sd .st::first-letter { text-transform: uppercase; }
.sub { position: relative; }
.sub .tr {
  position: absolute; top: -9px; right: 12px;
  padding: 4px 8px; border-radius: 999px; background: var(--tc); color: var(--tt);
  font: 800 9.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.sub:has(input:checked) { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc); background: color-mix(in srgb, var(--tc) 7%, var(--paper)); }
.sub:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ask-in .small a { color: var(--accent-text); font-weight: 700; }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120; transform: translate(-50%, 20px); opacity: 0;
  padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 700 14px/1.2 var(--body); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.facts li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.facts li svg, .facts .ti { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.facts a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
/* The legal minimum, small (Dan, 2026-10-31): one line, not a badge. */
.ai-note { margin-top: 14px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.ai-note a { color: var(--muted); }

.iblock { padding: 30px 0 4px; border-top: 1px solid var(--line); margin-top: 30px; }
.irest > .iblock:first-child { margin-top: 10px; }
.iblock h2 { font: 800 19px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 14px; }
.iblock .desc { font-size: 16px; line-height: 1.6; max-width: 66ch; }
.bul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bul li { position: relative; padding-left: 22px; font-size: 15px; }
.bul li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px;
  border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg);
}
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.specs div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; text-align: right; }
.opensl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opensl li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; font: 600 13.5px/1 var(--body);
}
.opensl .ti { color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.tags a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.mcard { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.mcard b { font: 800 16px/1.2 var(--display); }
.mcard p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.mcard .btn { margin-left: auto; }
.avatar.big { width: 48px; height: 48px; font-size: 15px; }
.kitrow { margin-top: 16px; max-width: 320px; }

/* ---- narrower ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fshow .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The home page's "New this month" keeps two full rows of three; it
     must not reach the browse grids, which show every result they page. */
  #new .grid > .card:nth-child(n+7) { display: none; }
  .grid.rail { grid-auto-columns: calc((100% - 40px) / 3.2); }
  .railbox .edge.back { left: -6px; }
  .railbox .edge.on { right: -6px; }
  .track { grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1.4fr) 64px 48px 112px 34px; }
  .browse .track { grid-template-columns: 52px minmax(0, 1.7fr) minmax(0, 1fr) 64px 44px 104px 34px; }
  .track .key { display: none; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .mkfoot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 268px; padding-bottom: 64px; }
  .mosaic {
    top: -120px; bottom: auto; right: -10vw; left: -10vw; width: auto; height: 400px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 60%, transparent);
    mask-image: linear-gradient(transparent, #000 30%, #000 60%, transparent);
  }
  .dgrid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 196px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -18px -22px -26px; padding: 18px 22px 34px; scroll-padding: 0 22px;
  }
  .dgrid::-webkit-scrollbar { display: none; }
  .dtile { scroll-snap-align: start; }
  .acct > a.plain { display: none; }
  /* The panel follows the gallery instead of sitting beside it. */
  .ilayout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gal" "panel" "rest"; }
  .ipanel { position: static; }
}
@media (max-width: 760px) {
  .mk-bar { gap: 12px; height: 58px; }
  .brand .logo { display: none; }
  .brand .name { font-size: 17px; }
  .bp-icon { width: 26px; height: 26px; margin-left: 0; }
  header.mk .mk-search { display: none; }
  .acct { gap: 10px; }
  .allow .meter, .allow .txt { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  #new .grid > .card:nth-child(n+7) { display: flex; }
  .sec-head { flex-wrap: wrap; align-items: flex-end; }
  .sec-head .side { width: 100%; justify-content: space-between; }
  .pstrip .as { margin-left: 0; overflow-x: auto; max-width: 100%; }
  .grid.rail { grid-auto-columns: 74%; gap: 16px; }
  .grid.g3, .fshow .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: 1fr; }
  .player { grid-template-columns: 1fr; padding: 22px 20px 40px; gap: 16px; }
  .big-play { width: 58px; height: 58px; }
  .scrub .wf { height: 80px; }
  .ptime { left: 20px; right: 20px; }
  .edits li { grid-template-columns: 34px minmax(0, 1fr) 44px; }
  .edits .ew { display: none; }
  .mcard { flex-wrap: wrap; }
  .chead-row { flex-direction: column; align-items: flex-start; }
  /* On a phone the facets are a drawer over the page, from the same button. */
  .fshow .browse .layout { grid-template-columns: 1fr; }
  .filters, .fshow .filters {
    display: flex; flex-direction: column;
    position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; max-height: none;
    width: min(360px, 88vw); padding: 18px 20px 0; background: var(--paper);
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    transform: translateX(-104%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .fshow .filters { transform: none; }
  .fclose {
    display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px;
    border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--ink);
  }
  .fhead .fclear { margin-left: auto; }
  .fdone { display: block; position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 18px; background: var(--paper); }
  .fdone .btn { width: 100%; justify-content: center; }
  .fshow .fscrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .45); }
  .pager a.n, .pager .gap { display: none; }
  .pager .of { display: grid; }
  /* The bar scrolls sideways on a phone, by finger or by mouse drag. */
  nav.depts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
  nav.depts::-webkit-scrollbar { display: none; }
  .sortby span { display: none; }
  .pager .num-far { display: none; }
  /* Still there on a narrow window: it may be a desk with a mouse, not a
     phone (Dan, 2026-10-31). Smaller, and inside the edge. */
  .railbox .edge { width: 38px; height: 38px; }
  .railbox .edge.back { left: 4px; }
  .railbox .edge.on { right: 4px; }
  .track, .browse .track { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
  .track:hover { background: none; }
  .track .th { width: 48px; height: 48px; }
  .track .wfc, .track .num, .track .bm { display: none; }
  .track .tt .m { display: block; }
  .share { flex-direction: column; align-items: flex-start; padding: 22px; }
}
@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  .hero .wrap { padding-top: 236px; }
  .mosaic { height: 340px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .lede { font-size: 17px; }
  .bigsearch { height: 54px; margin-top: 26px; }
  .bigsearch label.dept { display: none; }
  .bigsearch .field { padding-left: 14px; }
  .bigsearch input { font-size: 16px; }
  .bigsearch button { padding: 0 14px; }
  .bigsearch button span { display: none; }
  .promise { gap: 10px 18px; margin-top: 26px; }
  .dgrid { margin: -18px -16px -26px; padding: 18px 16px 34px; grid-auto-columns: 168px; }
  .card h3 { font-size: 14px; }
  .card .kind { font-size: 9.5px; }
  .card .foot { flex-wrap: wrap; gap: 8px; }
  .card .foot { justify-content: flex-end; }
  .kitb { display: none; }
  .btn.sm.app { display: none; }
  .grid.rail { margin: -18px -16px -26px; padding: 18px 16px 34px; scroll-padding: 0 16px; }
  .pgrid { grid-template-columns: 1fr; }
  .mkfoot .cols { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .pstrip .note { display: none; }
  .pstrip .as { gap: 6px; }
  .pstrip .as > .lbl { display: none; }
  .seg button { padding: 4px 8px; white-space: nowrap; }
}
/* A small waveform keeps its play button and drops the facts line, which
   the card's own label repeats. */
@container (max-width: 240px) {
  .pv-wave .meta, .pv-sfx .meta { display: none; }
}

/* ---- the showcase builds ----------------------------------------------------
   bp-config.js sets html[data-mode]. The public build sells nothing, so
   whatever offers a plan or asks for an account (saving does) is not drawn;
   a review build shows everything. */
html[data-mode="public"] [data-sells],
html[data-mode="public"] [data-save] { display: none !important; }
/* A shelf with nothing on it takes its section with it (blueprints.js). */
.sec[hidden], .trending[hidden] { display: none; }
/* The sample's shelf chips filter nothing; a live catalog leaves them out. */
html[data-catalog^="live"] #new .chips { display: none; }

/* A live item's gallery: the manifest's previews, whole, whatever their
   shape (a deck page, a type specimen), on the stage's dark ground. */
.live-one .pv img { object-fit: contain; }
.ba-range { display: block; width: 100%; margin: 12px 0 0; accent-color: var(--ink); }
.pnote { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pieces { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pieces li { font-size: 15px; line-height: 1.45; }
.pieces li b { display: block; }
.pieces li span { color: var(--muted); }
.tags.bestfor span {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.free-big.soon { font-size: 26px; line-height: 1.1; }
.buy .btn[href^="https://t6fv.io"] { margin-top: 16px; }

/* The T6FV logo standing in for the name inside a sentence, switched by
   colour scheme the way the header's is. */
.wordlogo {
  display: inline-block; width: 2.2em; height: 1em; vertical-align: -0.14em;
  background: url(/img/logo.svg) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .wordlogo { background-image: url(/img/logo-dark.svg); }
}
.opens-in { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.opens-in b { color: var(--ink); }
.discover {
  display: block; margin: 0 0 18px; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.discover:hover { text-decoration: underline; }

/* An address that names no item. */
.notfound { padding: 96px 0 128px; text-align: center; }
.notfound h1 { font: 800 clamp(28px, 4vw, 40px)/1.15 var(--display); letter-spacing: -0.02em; }
.notfound p { margin: 14px auto 26px; max-width: 46ch; color: var(--muted); font-size: 16px; }