/* The marketplace uses a cinema-style canvas. The original artwork is supplied locally. */
.market-app {
  color-scheme: dark;
  --bg: #09090b;
  --ink: #f5f2ed;
  --muted: #aaa7b1;
  --accent: #d5c0ff;
  --edge: #343239;
  --paper: #18171b;
  --panel: #18171b;
  --display: Georgia, "Times New Roman", serif;
  font: 15px/1.48 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.market-app .visually-hidden, .market-app .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.market-app .skip-link:focus {
  position: fixed;
  z-index: 12;
  top: 12px;
  left: 12px;
  padding: 9px 14px;
  color: var(--ink);
  background: #18161c;
}

.market-app a { text-underline-offset: .19em; }
.market-app :focus-visible { outline-color: #d5beff; }
.market-app [hidden] { display: none !important; }
.market-main, .documentation-page .docs-shell {
  width: min(1480px, 94%);
  padding: 0 0 118px;
  margin: 18px auto 0;
}

.market-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 385px;
  height: clamp(385px, 34vw, 478px);
  overflow: hidden;
  border-radius: 18px;
  background: #24212b;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.market-feature::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgb(28 24 34 / 96%) 0%, rgb(31 25 39 / 88%) 25%,
    rgb(33 26 42 / 45%) 46%, transparent 73%), linear-gradient(0deg, rgb(5 5 9 / 34%), transparent 43%);
}

.market-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgb(250 237 255 / 11%);
  border-radius: inherit;
}

.feature-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 53%;
}

.feature-copy {
  max-width: min(51%, 570px);
  padding: 26px 0 30px clamp(28px, 4.6vw, 76px);
}

.feature-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: .83rem;
  font-weight: 650;
  color: #e5dfe9;
  letter-spacing: .035em;
}

.feature-brand svg {
  width: 21px;
  height: 21px;
  fill: rgb(220 198 255 / 18%);
  stroke: #d9c7f0;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.feature-copy h1 {
  margin: 0;
  font: 400 clamp(57px, 5.7vw, 88px)/.92 var(--display);
  letter-spacing: -.06em;
  color: #fffaf1;
}

.feature-copy h1 em {
  display: block;
  margin: 2px 0 0;
  font-weight: 400;
  color: #d9c0fa;
}

.feature-copy p {
  max-width: 35ch;
  margin: 17px 0 20px;
  color: #e0dce3;
  font-size: clamp(.96rem, 1.25vw, 1.1rem);
  line-height: 1.45;
}

.feature-actions, .market-app .input-line, .market-app .command-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.feature-primary, .feature-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 39px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 620;
  text-decoration: none;
}

.feature-primary { color: #1c1721; background: #f7f0fa; }
.feature-primary:hover { color: #171019; background: #e6d2fa; }
.feature-secondary {
  color: #f5eef7;
  border-color: rgb(246 235 255 / 27%);
  background: rgb(15 14 18 / 44%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.feature-secondary:hover { border-color: #cbb7db; }
.feature-actions span { font-size: 1.08rem; line-height: 1; }

.market-catalog { scroll-margin-top: 16px; }
.market-app .market-filters {
  display: block;
  margin: 14px 0 0;
}

.search-strip {
  display: flex;
  align-items: center;
  min-height: 47px;
  gap: 11px;
  padding: 0 14px 0 18px;
  border: 1px solid #2c2a30;
  border-radius: 11px;
  background: #161519;
}

.search-strip:focus-within { border-color: #aa90bc; }
.search-strip>svg { width: 19px; height: 19px; flex: none; stroke: #aea7b8; stroke-width: 1.65; }
.market-app .search-strip input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 0;
  margin: 0;
  outline: none;
  border: 0;
  background: transparent;
  color: #f6f2f6;
}

.market-app input::placeholder { color: #aaa5b0; opacity: 1; }
.market-app .search-strip select {
  width: auto;
  max-width: 36%;
  min-height: 30px;
  padding: 1px 5px 1px 12px;
  margin: 0;
  border: 0;
  border-left: 1px solid #39353e;
  border-radius: 0;
  color: #c7c1cb;
  background: #161519;
  font-size: .83rem;
}

.category-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 9px 0 0;
}

.market-app .category-chip {
  min-height: 29px;
  padding: 3px 12px;
  border: 1px solid transparent;
  border-radius: 19px;
  background: transparent;
  color: #b4afb9;
  font-size: .82rem;
  font-weight: 540;
}

.market-app .category-chip:hover { color: #fff; background: #1b1920; }
.market-app .category-chip[aria-pressed=true] {
  border-color: #443a4b;
  color: #e5d1fb;
  background: #2b242e;
}

.shelf { margin: 22px 0 32px; }
.shelf-heading { display: flex; align-items: center; gap: 11px; margin: 0 0 11px; }
.shelf-heading h2 {
  margin: 0;
  color: #f5f0e9;
  font-size: clamp(21px, 1.95vw, 28px);
  line-height: 1.16;
  font-weight: 630;
  letter-spacing: -.036em;
}

.shelf-heading [data-shelf-count] {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 21px;
  padding: 1px 6px;
  border: 1px solid #333136;
  border-radius: 12px;
  color: #b9b0c3;
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
}

.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; align-items: start; }
.market-app .market-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #29272c;
  border-radius: 13px;
  background: #131214;
  box-shadow: none;
}

.market-card:focus-within, .market-card:hover { border-color: #625568; }
.card-cover {
  display: block;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  aspect-ratio: 2.18;
  overflow: hidden;
  background: #28242e;
}

.market-app .card-cover:focus-visible { outline-offset: -3px; }
.card-cover img {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease-out;
}

.market-card:hover .card-cover img { transform: scale(1.025); }
.card-cover::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(0deg,rgb(8 8 12 / 91%),rgb(6 6 10 / 27%) 35%, transparent 70%);
}

.card-cover h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 9px 15px 10px;
  border-top: 1px solid rgb(255 242 255 / 17%);
  background: linear-gradient(105deg,rgb(30 26 36 / 71%),rgb(30 26 36 / 40%));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: white;
  font-size: clamp(18px, 1.6vw, 25px);
  font-weight: 620;
  letter-spacing: -.034em;
  text-shadow: 0 1px 6px rgb(0 0 0 / 38%);
}

.access-badge {
  position: absolute;
  top: 11px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 20px;
  background: rgb(13 12 17 / 75%);
  color: #f3eef6;
  font-size: .66rem;
  line-height: 1.35;
  font-weight: 650;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.access-badge.included::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a4d6b4;
}

.card-caption { position: relative; padding: 12px 16px 14px; }
.card-caption>p { margin: 0 0 9px; color: #c9c3ce; font-size: .91rem; line-height: 1.4; }
.market-card .card-details summary, .card-deploy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  min-height: 28px;
  cursor: pointer;
  list-style: none;
  color: #d4bde8;
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
}

.market-card .card-details summary:after { content: none; }
.market-card .card-details summary:hover, .card-deploy:hover { color: white; }
.market-card .card-details summary span { font-weight: 400; }
.card-details[open] summary span { transform: rotate(90deg); }
.card-deploy { float: right; margin-left: 12px; }
.card-contract { margin-top: 9px; padding-top: 12px; border-top: 1px solid #38353c; clear: both; }
.card-contract h4, .card-contract dt { margin: 13px 0 3px; color: #f0eaf6; font-weight: 640; font-size: .87rem; }
.card-contract dd, .card-contract p, .card-contract ul { margin: 4px 0; overflow-wrap: anywhere; color: #c7c0cc; }
.card-contract ul { padding-left: 20px; }
.card-contract dd span { margin-right: 5px; }
.market-app pre { border-color: #39333f; color: #e7ddec; background: #131116; }
.market-app code { color: inherit; }
.market-empty { padding: 35px 10px; text-align: center; }
.market-empty button { margin-top: 9px; border-color: #524659; background: #29232d; color: #eadcf4; }

.market-dock {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100vw - 20px);
  padding: 5px;
  border: 1px solid rgb(217 204 232 / 24%);
  border-radius: 18px;
  background: rgb(27 25 32 / 89%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 7px 25px rgb(0 0 0 / 43%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.market-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #cbc5ce;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 590;
}
.market-dock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.market-dock a:hover { color: white; }
.market-dock a[aria-current=page] { color: #f6edf9; background: #443c4b; border-color: rgb(225 207 240 / 17%); }

.market-app .operate-view { max-width: 920px; margin: 28px auto; }
.operate-header { padding: 18px 0; }
.operate-header>a { color: #bea1d2; text-decoration: none; }
.operate-header h1,.documentation-page .guide h1 { margin: 14px 0 6px; font: 400 clamp(37px, 5vw, 62px)/1.08 var(--display); letter-spacing: -.035em; }
.operate-header p { color: #c9c2cd; font-size: 1.02rem; }
.market-app #controls { border: none; padding: 0; }
.market-app #controls>legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); }
.workspace-panel,.market-app .instance-setup,.catalog-mode {
  margin: 12px 0;
  padding: clamp(17px, 2.5vw, 29px);
  border: 1px solid #353139;
  border-radius: 15px;
  background: linear-gradient(125deg, rgb(64 53 70 / 24%),transparent 60%),#18161a;
}
.market-app .operate-view button, .documentation-page button {
  border-color: #504857;
  color: #eee7f1;
  background: #302a35;
}
.market-app .operate-view .primary { background: #e0c9f4; color: #211826; border-color: #e0c9f4; }
.market-app .operate-view .stop { color: #f6bfc7; }
.market-app .operate-view input,.market-app .operate-view select,.market-app .operate-view textarea,.documentation-page input,.market-app #preview-input {
  border: 1px solid #48414c;
  border-radius: 8px;
  padding: 9px 11px;
  background: #131215;
  color: #eee9ef;
  font: inherit;
}
.market-app .operate-view label { color: #d5cdd9; }
.market-app .operate-view p { color: #c4bcc8; }
.market-app .operate-view .err { color: #ffb2be; }
.market-app .operate-view .check input { padding: 0; accent-color: #d5b4f3; }
.market-app .operate-view #forget { border-color: #665b69; }
.operate-view .input-line input { min-width: 150px; }
.operate-view h2,.operate-view h3 { margin: 0 0 9px; }
.operate-view a,.documentation-page a { color: #d9bff4; }

.documentation-page .docs-shell { margin-top: 28px; }
.documentation-page .toc,.documentation-page .guide { background: #18161a; border-color: #39333d; box-shadow: none; }
.documentation-page .guide { padding: clamp(20px, 4vw, 52px); }
.documentation-page .guide h1,.documentation-page .guide h2 { color: #f4eee8; }
.documentation-page .toc a { color: #c7becd; }
.documentation-page .reference-detail { background: #1e1b21; border-color: #403a44; }
.documentation-page .market-dock a { color: #cbc5ce; }
.market-app .operate-view [id],.market-card { scroll-margin: 14px; }

@media(max-width:850px) {
  .shelf-grid { gap: 11px; }
  .card-caption { padding: 10px 12px; }
  .feature-art { object-position: 67% 50%; }
  .feature-copy { max-width: 55%; }
}
@media(max-width:690px) {
  .market-main,.documentation-page .docs-shell { width: calc(100% - 26px); margin-top: 12px; }
  .market-feature { min-height: 370px; height: 56vw; }
  .feature-copy { max-width: 69%; padding-left: 26px; }
  .feature-copy h1 { font-size: clamp(51px, 9vw, 66px); }
  .feature-brand { margin-bottom: 17px; }
  .shelf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shelf { margin-top: 20px; }
}
@media(max-width:480px) {
  .market-main,.documentation-page .docs-shell { width: calc(100% - 20px); margin-top: 10px; }
  .market-feature { height: 355px; min-height: 0; align-items: end; border-radius: 14px; }
  .feature-art { object-position: 73% 32%; }
  .market-feature::before { background: linear-gradient(0deg, rgb(8 7 13 / 96%), rgb(8 7 12 / 73%) 42%, transparent 91%); }
  .feature-copy { max-width: 100%; padding: 21px 19px 22px; }
  .feature-copy h1 { font-size: 51px; }
  .feature-brand { margin-bottom: 12px; }
  .feature-copy p { margin: 11px 0 14px; max-width: 30ch; }
  .feature-actions { gap: 7px; }
  .feature-primary,.feature-secondary { padding: 7px 10px; gap: 7px; font-size: .82rem; }
  .market-app .search-strip { gap: 8px; padding-left: 12px; padding-right: 7px; }
  .market-app .search-strip input { font-size: .89rem; }
  .market-app .search-strip select { font-size: .76rem; padding-left: 5px; }
  .category-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .market-app .category-chip { flex: none; min-height: 34px; }
  .shelf-grid { grid-template-columns:minmax(0,1fr); gap: 13px; }
  .card-cover { aspect-ratio: 2.05; }
  .card-cover h3 { font-size: 22px; }
  .market-dock { bottom: max(9px,env(safe-area-inset-bottom)); gap: 1px; padding: 4px; }
  .market-dock a { gap: 4px; padding: 7px 7px; min-height: 40px; font-size: .73rem; }
  .market-dock svg { width: 15px; height: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .card-cover img { transition: none; }
  .market-card:hover .card-cover img { transform: none; }
}
@media(prefers-reduced-transparency:reduce) {
  .market-dock,.access-badge,.feature-secondary,.card-cover h3 { background: #242126; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.prepare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.prepare-card { min-width:0; padding:clamp(18px,3vw,32px); border:1px solid #48414c; border-radius:18px; background:#1b191f; }
.prepare-card>label { display:block; margin:1rem 0 .4rem; }
.prepare-card>select,.prepare-card>input { width:100%; box-sizing:border-box; }
.prepare-card .check { display:flex; gap:.5rem; align-items:center; }
.prepare-card .check input { width:auto; }
.prepare-card output { display:block; white-space:pre-wrap; overflow-wrap:anywhere; margin:.8rem 0 0; font-family:ui-monospace,monospace; }
.prepare-card .feature-primary { color:#201824; }
.prepare-card .connect-help { border-top:1px solid #443d49; padding-top:1rem; margin-top:1rem; }
.prepare-card .connect-help summary { cursor:pointer; font-weight:600; }
.prepare-card pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.prepare-card #recipe-msg { margin-left:.5em; }
@media(max-width:760px) { .prepare-grid { grid-template-columns:minmax(0,1fr); } }

.account-shortcut {position:absolute;top:16px;right:16px;z-index:2;border:1px solid #76627c;border-radius:8px;padding:6px 12px;background:#211925de;color:#f7effa;text-decoration:none;font-weight:600;font-size:.86rem;}