/* The home page's Blender block (28.10): laid out as the MCP block (.dev) -
   words, logos and buttons on the left, a card on the right that walks
   through the real thing (web/blender-demo.js): the add-on's panel in
   Blender, the board with its chat and settings, the shop item card, the
   item page in the seller's site. Every label is the product's own. The
   front window is the stage's data-front; the story's states are f-*. */

.dev.bl { margin-top: 112px; }
.bl .dev-in { grid-template-columns: .82fr 1.18fr; }
.bl-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.bl-logo { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 22px; border-radius: 14px;
  border: 1px solid #27272a; background: #111113; color: #fff; text-decoration: none;
  transition: border-color .2s, background .2s; }
.bl-logo:hover { border-color: #3f3f46; background: #151518; }
.bl-logo svg { width: 34px; height: 34px; fill: currentColor; }
.bl-logo span { font: 650 22px/1 var(--sans); letter-spacing: -.01em; }
.bl-logo img { display: block; height: 40px; width: auto; }
.bl-meta { margin: 14px 0 0 !important; font: 12.5px/1.4 var(--mono) !important; color: #71717a !important; }

.bl-card { border-radius: 16px; background: #111113; border: 1px solid #27272a; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(196, 220, 124, 0.25); }
.bl-stage { position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #17171b 0%, #0b0b0d 70%);
  font-family: var(--sans); }
.bl-win { position: absolute; inset: 4.5%; display: flex; flex-direction: column; border-radius: 10px;
  overflow: hidden; border: 1px solid #2a2a30; background: #1c1c1f; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .8s; }
.bl-w-blender { transform: translate(-6%, -3%) scale(.9); opacity: 0; }
.bl-w-board { transform: translate(5%, 3%) scale(.92); opacity: 0; }
.bl-w-shop { transform: translate(7%, 4%) scale(.9); opacity: 0; }
.bl-stage[data-front="blender"] .bl-w-blender,
.bl-stage[data-front="board"] .bl-w-board,
.bl-stage[data-front="shop"] .bl-w-shop { transform: none; opacity: 1; z-index: 2; }
.bl-stage[data-front="board"] .bl-w-blender { transform: translate(-8%, -5%) scale(.86); opacity: .22; }
.bl-stage[data-front="shop"] .bl-w-board { transform: translate(-7%, -5%) scale(.86); opacity: .22; }

.bl-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 22px; padding: 0 9px;
  background: #242428; border-bottom: 1px solid #2f2f35; }
.bl-bar-light { background: #ececee; border-color: #dcdce0; }
.bl-dots { display: inline-flex; gap: 5px; }
.bl-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a40; }
.bl-bar-light .bl-dots i { background: #c9c9cf; }
.bl-title { font: 10px/1 var(--mono); color: var(--ink-3); }
.bl-bar-light .bl-title { color: #6b6b74; }
.bl-view { position: relative; min-width: 0; }
.bl-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Blender: top bar, viewport header, gizmo, the N-panel, the status bar */
.bl-w-blender { background: #1d1d1d; border-color: #111; font-size: 9.5px; color: #cfcfcf; }
.bb-top { flex: none; display: flex; align-items: center; gap: 10px; height: 20px; padding: 0 9px; background: #181818; }
.bb-top i { flex: 0 0 14px; }
.bb-top .on { padding: 2px 6px; border-radius: 4px; background: #3a3a3a; color: #fff; }
.bb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 37% 16px; }
.bl-v-blender { background: #3d3d3d; }
.bb-head { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 9px; align-items: center; height: 20px;
  padding: 0 8px; background: rgba(48, 48, 48, .9); }
.bb-mode { padding: 2px 6px; border-radius: 4px; background: #545454; color: #fff; }
.bb-gizmo { position: absolute; right: 12px; top: 28px; width: 46px; height: 46px; }
.gz { position: absolute; width: 13px; height: 13px; border-radius: 50%; font: 700 7.5px/13px var(--sans);
  color: #111; text-align: center; font-style: normal; }
.gz-z { left: 16px; top: 0; background: #2f83e3; }
.gz-y { left: 3px; top: 14px; background: #6ea92c; }
.gz-x { left: 30px; top: 22px; background: #e23e57; }
.bb-n { background: #2b2b2b; border-left: 1px solid #1a1a1a; padding: 8px 7px; min-width: 0; }
.bb-panel { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 5px; background: #303030; }
.bb-ph { color: #e6e6e6; padding-bottom: 3px; }
.bb-btn { display: flex; align-items: center; justify-content: center; gap: 5px; height: 17px; border-radius: 3px;
  background: #545454; color: #e6e6e6; white-space: nowrap; transition: filter .15s, transform .15s; }
.bb-btn svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.bb-field { height: 17px; padding: 0 6px; border-radius: 3px; background: #1d1d1d; color: #cfcfcf; line-height: 17px;
  overflow: hidden; white-space: nowrap; }
.bb-check { display: flex; align-items: center; gap: 5px; }
.bb-check i { width: 9px; height: 9px; border-radius: 2px; background: #545454; }
.bb-note { color: #a8a8a8; padding-top: 2px; }
.bb-tabs { background: #232323; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px;
  writing-mode: vertical-rl; font-size: 8.5px; color: #8d8d8d; }
.bb-tabs .on { color: #fff; background: #3a3a3a; padding: 4px 1px; border-radius: 3px; }
.bb-status { flex: none; height: 17px; padding: 0 9px; display: flex; align-items: center; background: #181818;
  color: #b9d68b; }

/* --- the board: chat, plate, settings */
.bd-ui { flex: 1; min-height: 0; display: grid; grid-template-columns: 27% 1fr 31%; font-size: 8.5px; color: #c4c4cc; }
.bd-chat { display: flex; flex-direction: column; gap: 6px; padding: 8px 7px; border-right: 1px solid #26262b;
  background: #141416; min-width: 0; overflow: hidden; }
.bd-msg { display: flex; gap: 5px; }
.bd-msg p { margin: 0; line-height: 1.35; }
.bd-orb { flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6c37a, #b5651d); }
.bd-draft { display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 7px; border: 1px solid #2c2c33;
  background: #18181b; }
.bd-draft b { color: #fff; font-size: 9px; }
.bd-draft code { font: 7px/1.35 var(--mono); color: var(--green); word-break: break-all; }
.bd-row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4px; align-items: center; }
.bd-lab { color: #8e8e98; line-height: 1.3; }
.bd-link { color: #9ecbff; word-break: break-all; }
.bd-tick { display: flex; align-items: baseline; gap: 4px; color: #e4e4e7; }
.bd-tick i { font-style: normal; color: var(--green); }
.bd-tick small { color: #8e8e98; font-size: 7.5px; }
.bd-ask { margin-top: auto; padding: 6px; border-radius: 6px; border: 1px solid #2c2c33; color: #5c5c66; }
.bl-v-board { background: #121214; }
.bd-notice { position: absolute; left: 8px; right: 8px; top: 8px; padding: 5px 8px; border-radius: 7px; font-size: 8px;
  line-height: 1.35; background: rgba(28, 28, 32, .95); border: 1px solid #34343c; color: #d4d4d8; }
.bd-status { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 4px 9px; border-radius: 99px;
  background: rgba(28, 28, 32, .95); border: 1px solid #34343c; white-space: nowrap; }
.bd-props { padding: 8px 7px; background: #161618; border-left: 1px solid #26262b; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; }
.bd-props > div { display: flex; flex-direction: column; gap: 4px; }
.bd-pieces { flex-direction: row !important; gap: 5px !important; font: 7.5px/1 var(--mono); color: #8e8e98; }
.bd-row { flex-direction: row !important; align-items: center; gap: 5px !important; padding: 4px 5px; border-radius: 5px;
  background: #222226; color: #fff; }
.bd-row i { width: 5px; height: 5px; border-radius: 50%; background: #6bd16a; }
.bd-h { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center;
  color: #fff; font-weight: 600; font-size: 9.5px; padding-top: 3px; }
.bd-shop { padding: 2px 7px; border-radius: 99px; border: 1px solid #3a3a42; font-size: 8px; font-weight: 500;
  transition: filter .15s, transform .15s; }
.bd-meta { color: #8e8e98; }
.bd-g { font: 7.5px/1 var(--mono); color: #8e8e98; padding-top: 4px; letter-spacing: .04em; }
.bd-g em { font-style: normal; color: #c4dc7c; border: 1px solid rgba(196, 220, 124, .35); padding: 0 4px; border-radius: 99px; }
.bd-sw { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 3px !important; }
.bd-sw span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 99px; border: 1px solid #2c2c33; }
.bd-sw i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); border: 1px solid #444; }
.bd-set { display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px; }
.bd-in { display: block; padding: 3px 5px; border-radius: 4px; background: #0e0e10; border: 1px solid #2c2c33; color: #fff;
  min-height: 15px; white-space: nowrap; overflow: hidden; }
.bd-type { font-weight: 600; }
.bd-box { justify-self: start; width: 11px; height: 11px; border-radius: 3px; background: #e4e4e7; color: #111;
  font-size: 8px; line-height: 11px; text-align: center; }
.bd-btn { display: block; padding: 4px 6px; border-radius: 5px; background: #f4f4f5; color: #0b0b0d; font-weight: 600;
  text-align: center; transition: filter .15s, transform .15s; }
.bd-ghost { background: transparent; color: #e4e4e7; border: 1px solid #3a3a42; }

/* --- the seller's site, the item page in its frame */
.bl-w-shop { background: #f6f6f7; border-color: #d9d9de; }
.sh-site { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sh-nav { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e6e6ea;
  font-size: 10px; color: #55555e; }
.sh-nav b { color: #111; margin-right: auto; font-size: 11px; }
.sh-frame { flex: 1; display: grid; place-items: start center; padding: 12px; background: #0b0b0d; }
.sh-form { width: min(260px, 92%); display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 12px;
  background: #18181b; border: 1px solid #2c2c33; font-size: 9px; color: #c4c4cc; }
.sh-back { color: #8e8e98; font-size: 8.5px; }
.sh-h { color: #fff; font-size: 12px; }
.sh-lab { display: flex; justify-content: space-between; color: #a1a1aa; }
.sh-lab small { color: #71717a; }
.sh-in { display: block; padding: 5px 7px; border-radius: 6px; background: #0e0e10; border: 1px solid #2c2c33; color: #fff;
  min-height: 21px; font-weight: 600; }
.sh-ph { color: #5c5c66; font-weight: 400; }
.sh-price { color: #fff; font-weight: 600; padding-top: 2px; }
.sh-btn { display: block; margin-top: 4px; padding: 6px; border-radius: 7px; background: #f4f4f5; color: #0b0b0d; font-weight: 600;
  text-align: center; transition: filter .15s, transform .15s; }
.sh-done p { margin: 0; line-height: 1.4; }
.bl-caret { display: inline-block; width: 1.2px; height: 10px; margin-left: 1px; vertical-align: -1px;
  background: #fff; animation: bl-blink 1s steps(1) infinite; }
@keyframes bl-blink { 50% { opacity: 0; } }

.is-press { transform: scale(.95); filter: brightness(1.25); }

/* the story's states: what shows when */
.bl-on-sent, .bl-on-arrive, .bl-on-busy, .bl-on-draft, .bl-on-saved, .bl-on-sent2 { opacity: 0; transition: opacity .35s; }
.bl-stage.f-sent .bl-on-sent, .bl-stage.f-arrive .bl-on-arrive, .bl-stage.f-busy .bl-on-busy,
.bl-stage.f-draft .bl-on-draft, .bl-stage.f-saved .bl-on-saved, .bl-stage.f-sent2 .bl-on-sent2 { opacity: 1; }
.bl-stage:not(.f-gen) .bl-on-gen, .bl-stage.f-gen .bl-off-gen,
.bl-stage:not(.f-draft) .bl-on-draft, .bl-stage:not(.f-saved) .bl-on-saved, .bl-stage.f-saved .bl-off-saved,
.bl-stage:not(.f-sent2) .bl-on-sent2, .bl-stage.f-sent2 .bl-off-sent2 { display: none; }

.bl-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 16px; height: 16px; pointer-events: none;
  transform: translate(60%, 70%); transition: transform .7s cubic-bezier(.3, .7, .2, 1);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

.bl-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0;
  border-top: 1px solid #1f1f22; }
.bl-steps li + li { border-left: 1px solid #1f1f22; }
.bl-steps button { width: 100%; padding: 11px 10px; text-align: left; cursor: pointer; background: transparent; border: 0;
  color: #71717a; font: 500 12px/1 var(--sans); display: flex; align-items: center; gap: 7px;
  transition: color .3s, background .3s; }
.bl-steps b { font: 10px/1 var(--mono); color: #52525b; }
.bl-steps button:hover { color: #d4d4d8; }
.bl-steps button[aria-current="step"] { color: #fff; background: rgba(196, 220, 124, .06); }
.bl-steps button[aria-current="step"] b { color: var(--lime, var(--green)); }

@media (max-width: 1100px) {
  .bl .dev-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bl-stage { aspect-ratio: 4 / 5; }
  /* a phone: the chat (the item card lives there) and the settings; the plate goes */
  .bd-ui { grid-template-columns: 45% 55%; }
  .bl-v-board { display: none; }
  .bb-main { grid-template-columns: 1fr 44%; }
  .bb-tabs { display: none; }
  .bl-steps { grid-template-columns: repeat(5, auto); overflow-x: auto; }
  .bl-steps button { white-space: nowrap; }
  .bl-logo { height: 54px; padding: 0 16px; }
  .bl-logo img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-win, .bl-cursor { transition: none; }
  .bl-cursor { display: none; }
}
/* the block sits in .dev, whose paragraphs are the big grey lede: not inside the card */
.bl .bl-card p { margin: 0 !important; font-size: inherit !important; line-height: 1.35; color: inherit !important; }

/* the seller's product page: their words beside the Morcano item page in its
   frame (what embed.js puts on a site), with the live piece (item-preview.js) */
.sh-page { flex: 1; min-height: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; padding: 12px;
  background: #f6f6f7; }
.sh-product { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; font-size: 9.5px; line-height: 1.45;
  color: #55555e; min-width: 0; }
.sh-product b { color: #111; font-size: 13px; line-height: 1.2; }
.sh-tag { margin-top: 4px; align-self: start; padding: 3px 8px; border-radius: 99px; background: #e9e9ee; color: #44444c; }
.sh-page .sh-frame { padding: 0; background: transparent; place-items: start stretch; min-height: 0; }
.sh-page .sh-form { width: auto; gap: 4px; padding: 10px; }
.sh-form .bl-v-shop { height: 128px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #ffffff, #e9e9ee); }
.sh-sw { display: flex; gap: 5px; }
.sh-sw i { width: 15px; height: 15px; border-radius: 50%; background: var(--c); border: 2px solid transparent;
  box-shadow: 0 0 0 1px #3a3a42; transition: border-color .2s; }
.sh-sw i[aria-pressed="true"] { border-color: #fff; }
@media (max-width: 640px) {
  .sh-page { grid-template-columns: 1fr; }
  .sh-product { display: none; }
}