/* Tools: patch bay, vault, wall, IDE, git graph, marketplace. */

/* Patch bay. */
.pbs { --plugged: 0; height: 320vh; }
.pbs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 3vw; align-items: center; padding: 100px var(--gutter) 30px; max-width: 1560px; margin: 0 auto; }
.pbs-copy .lede { margin-top: 22px; }
.pbs-count { margin-top: 26px; color: #7a6231; }
.pb { position: relative; width: 100%; aspect-ratio: 1000 / 640; max-height: 80vh; padding: 0; border-radius: 34px; background: linear-gradient(180deg, #f3f1ec, #ebe8e1); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(10,10,10,0.05), 0 40px 80px -40px rgba(20,20,30,0.35); }
.pb::before { content: ''; position: absolute; inset: 14px; border-radius: 24px; background-image: radial-gradient(rgba(10,10,10,0.07) 1px, transparent 1.4px); background-size: 16px 16px; pointer-events: none; }
.pb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-lead { fill: none; stroke: #1b1a17; stroke-width: 4.5; stroke-linecap: round; filter: url(#pb-sh); transition: stroke 300ms; }
.pb-lead.is-in { stroke: #2a2723; }
.pb-pk { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(201,166,97,0.9)); }
.pb-jack { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 10px; }
.pb-jack--app { flex-direction: row; translate: -100% -50%; margin-left: 26px; }
.pb-jack--agent { translate: 0 -50%; margin-left: -26px; }
.pb-jack__plate { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 8px 16px -10px rgba(20,20,30,0.35); }
.pb-jack__plate svg { width: 20px; height: 20px; fill: var(--b); }
.pb-jack--agent .pb-jack__plate { border-radius: 50%; width: 46px; height: 46px; color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 8px 16px -10px rgba(20,20,30,0.35); transition: box-shadow 300ms; }
.pb-jack--agent .pb-jack__plate .monad-svg { width: 32px; height: 32px; }
.pb-jack--agent.is-on .pb-jack__plate { box-shadow: 0 0 0 2px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent); }
.pb-jack__hole { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #0e0d0b 40%, #4a4740 42%, #d9d5cb 70%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.pb-jack.is-on .pb-jack__hole { background: radial-gradient(circle, var(--gold) 30%, #4a4740 34%, #d9d5cb 70%); }
.pb-jack__label { font-size: 12.5px; color: var(--grey-1); white-space: nowrap; }
.pb-jack--app .pb-jack__label { order: -1; }
.pb-jack--app:not(.is-on) { opacity: 0.6; }

/* Vault: a dark chapter. The steps on the left, the four lanes on the right. */














/* The wall. */
.wl-sec { position: relative; }
.wl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wl { --deep: color-mix(in srgb, var(--b) 62%, #0a0a0a); position: relative; aspect-ratio: 1; display: grid; align-content: end; justify-items: start; gap: 6px; padding: 14px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; text-align: left; cursor: pointer;
  background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--b) 92%, #fff 8%), transparent 60%), linear-gradient(160deg, var(--deep), color-mix(in srgb, var(--b) 30%, #0a0a0a));
  box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--b) 60%, #000); transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.wl__art { position: absolute; right: -20%; top: -18%; width: 80%; aspect-ratio: 1; z-index: -1; opacity: 0.22; transform: rotate(-14deg); transition: transform 500ms var(--ease-out), opacity 300ms; }
.wl__art svg { width: 100%; height: 100%; fill: #fff; }
.wl__art .tc__mono { font: 700 64px var(--sans); color: #fff; }
.wl__i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.wl__i svg { width: 17px; height: 17px; fill: #fff; }
.wl__i .tc__mono { font: 600 12px var(--mono); color: #fff; }
.wl b { font-size: 15px; letter-spacing: -0.015em; }
@media (hover: hover) and (pointer: fine) { .wl:hover { transform: translateY(-3px); } .wl:hover .wl__art { transform: rotate(-4deg) scale(1.1); opacity: 0.32; } }


















/* IDE: a dark band, pinned while the session types. */
.ide { height: 560vh; background: var(--night); }












/* Launch kit. */
.ggs { height: 300vh; }
.ggs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; gap: 30px; padding: 96px var(--gutter) 30px; max-width: 1480px; margin: 0 auto; box-sizing: border-box; }
.ggs-pin .ch__head { margin-bottom: 0; }
.gg { display: grid; grid-template-columns: minmax(0, 0.9fr) 40px minmax(0, 0.8fr) 40px minmax(0, 1.5fr); align-items: center; }
.lk-pr { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline-strong), 0 20px 40px -26px rgba(20,20,30,0.4); }
.lk-pr header { display: grid; gap: 8px; }
.lk-pr header b { font-size: 17px; letter-spacing: -0.02em; }
.lk-pr header b .mono { font-size: 13px; color: var(--grey-3); font-weight: 400; }
.lk-state { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #2f8a4a; color: #fff; font-size: 11px; transition: background-color 300ms; }
.lk-pr.is-merged .lk-state { background: #8250df; }
.lk-branch { margin: 0; font-size: 11px; color: var(--grey-2); }
.lk-commits { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 6px; border-left: 2px solid var(--hairline-strong); font-size: 13px; }
.lk-commits .mono { margin-right: 8px; font-size: 11px; color: var(--grey-3); }
.lk-diff { margin: 0; display: flex; gap: 10px; font-size: 11px; color: var(--grey-2); }
.lk-diff .is-add { color: #2f8a4a; }
.lk-diff .is-del { color: #b4442c; }
.lk-diff .is-ok { margin-left: auto; color: #2f8a4a; }
.lk-merge { justify-self: stretch; text-align: center; padding: 10px; border-radius: 10px; background: #2f8a4a; color: #fff; font: 600 13.5px var(--sans); transition: transform 150ms, background-color 300ms; }
.lk-pr.is-press .lk-merge { transform: scale(0.96); }
.lk-pr.is-merged .lk-merge { background: rgba(130,80,223,0.1); color: #8250df; font-size: 0; }
.lk-pr.is-merged .lk-merge::before { content: 'Merged · Launch Crew woke up'; font-size: 13px; }
.lk-wire { --k: 0; height: 2px; background: linear-gradient(90deg, var(--gold) calc(var(--k) * 100%), var(--hairline-strong) 0); }
.lk-brief { --k: 0; display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--night); color: var(--night-text); opacity: calc(0.25 + var(--k) * 0.75); transform: translateY(calc((1 - var(--k)) * 10px)); }
.lk-brief header { display: flex; align-items: center; gap: 10px; }
.lk-orb { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #f1f0eb; color: var(--ink); }
.lk-orb .monad-svg { width: 26px; height: 26px; }
.lk-brief small { display: block; font-size: 10px; color: var(--gold); }
.lk-brief header b { display: block; font-size: 16px; }
.lk-brief dl { margin: 0; display: grid; gap: 8px; }
.lk-brief dl div { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); opacity: 0.2; transition: opacity 300ms; }
.lk-brief dl div.is-on { opacity: 1; }
.lk-brief dt { font-size: 10px; color: #8f8b82; }
.lk-brief dd { margin: 0; font-size: 14px; }
.lk-kit { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-piece { --k: 0; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), inset 0 3px 0 var(--c); opacity: calc(0.2 + var(--k) * 0.8); transform: scale(calc(0.96 + var(--k) * 0.04)); }
.lk-piece header { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--grey-3); }
.lk-who { color: color-mix(in srgb, var(--c) 60%, #0a0a0a); }
.lk-piece b { font-size: 13.5px; line-height: 1.25; letter-spacing: -0.01em; }
.lk-art { height: clamp(54px, 9vh, 84px); border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, #faf9f6); overflow: hidden; display: grid; }
.lk-vid { position: relative; display: block; }
.lk-vid img { width: 100%; height: 100%; object-fit: cover; }
.lk-vid i { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; translate: -50% -50%; border-radius: 50%; background: rgba(255,255,255,0.9); }
.lk-vid i::after { content: ''; position: absolute; left: 10px; top: 7px; border: 6px solid transparent; border-left: 9px solid var(--ink); }
.lk-vid em { position: absolute; right: 6px; bottom: 5px; font-style: normal; font-size: 9.5px; color: #fff; }
.lk-thread { display: grid; gap: 5px; padding: 10px; align-content: center; }
.lk-thread i { height: 12px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.lk-thread i:nth-child(2) { width: 85%; }
.lk-thread i:nth-child(3) { width: 65%; }
.lk-lines, .lk-mail { display: grid; gap: 6px; padding: 10px; align-content: center; }
.lk-lines i, .lk-mail i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--c) 30%, #e6e2d8); }
.lk-lines i:first-child { height: 9px; width: 70%; background: var(--ink); }
.lk-lines i:last-child, .lk-mail i:last-child { width: 55%; }
.lk-mail b { font-size: 9.5px; color: var(--grey-2); }
.lk-status { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--grey-3); }
.lk-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ggs :is(i, em), .mk :is(i, em), .vt :is(i, em), .ide :is(i, em) { font-family: inherit; font-style: normal; }
.lk-piece.is-done .lk-status { color: #2f6b3a; }
.lk-piece.is-done .lk-status i { background: #2f8a4a; }
.lk-ready { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--ink); color: #f1f0eb; font-size: 13.5px; opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 300ms var(--ease-out); }
.lk-ready.is-on { opacity: 1; transform: none; }
.lk-ready b { padding: 8px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 13px; }

/* Marketplace (planned): full-bleed, dark, high contrast. */
.mk { position: relative; margin-top: 10vh; background: var(--night); color: var(--night-text); overflow: hidden; }
.mk::before { content: ''; position: absolute; left: 30%; top: -30%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,166,97,0.16), transparent 62%); pointer-events: none; }
.mk-in { position: relative; min-height: 100svh; box-sizing: border-box; padding: 78px var(--gutter) 24px; max-width: 1480px; margin: 0 auto; display: grid; grid-template-rows: auto auto auto; gap: 16px; align-content: center; }
.mk-head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.mk-h { margin: 12px 0 0; font: 600 clamp(32px, 3.6vw, 60px)/0.95 var(--sans); letter-spacing: -0.05em; }
.mk-h span { display: block; color: var(--gold); white-space: nowrap; }
.mk-lede { margin: 0; color: var(--night-dim); font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.5; }
.mk-flow { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 6px; font-size: 11px; color: var(--gold); }
.mk-flow li { padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(201,166,97,0.4); }
.mk-flow li + li::before { content: '→ '; color: #6f6b63; }
.mk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mk-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.05); }
.mk-tabs button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--night-dim); font: 500 13px var(--sans); cursor: pointer; }
.mk-tabs button[aria-pressed="true"] { background: #f1f0eb; color: var(--ink); }
.mk-note { color: #6f6b63; font-size: 10.5px; }

/* Closing band: a fan of the apps you already use, around Chip. */
.sb { padding: 16vh var(--gutter) 6vh; }
.sb-inner { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; align-items: center; }
.sb-copy .h { font-size: clamp(40px, 5vw, 84px); }
.sb-copy .lede { margin-top: 20px; }
.sb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sb-fan { position: relative; height: 440px; }
.sb-card { position: absolute; left: 50%; bottom: 30px; width: 150px; height: 200px; margin-left: -75px; padding: 16px; border-radius: 22px; display: grid; align-content: space-between; color: #fff; transform-origin: 50% 160%; transform: rotate(calc(var(--i) * 9deg)) translateY(-40px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--b) 70%, #0a0a0a), color-mix(in srgb, var(--b) 35%, #0a0a0a)); box-shadow: 0 30px 50px -26px rgba(20,20,30,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); transition: transform 500ms var(--ease-out); }
.sb-card svg { width: 34px; height: 34px; fill: #fff; }
.sb-card b { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .sb-fan:hover .sb-card { transform: rotate(calc(var(--i) * 12deg)) translateY(-56px); } }
.sb-core { position: absolute; left: 50%; bottom: 0; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 0 60px rgba(201,166,97,0.35), 0 20px 40px -20px rgba(20,20,30,0.4); z-index: 2; }
.sb-core .monad-svg { width: 78px; height: 78px; }

@media (min-width: 901px) and (max-height: 860px) {
  .pbs-pin, .vt-pin, .ide-pin, .ggs-pin { padding-top: 84px; }

}
@media (max-width: 900px) {
  .ggs-pin { padding: 76px var(--gutter) 14px; gap: 14px; align-content: start; }
  .ggs-pin .lede { display: none; }
  .gg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'pr brief' 'kit kit'; gap: 10px; align-items: start; }
  .lk-pr { grid-area: pr; padding: 12px; gap: 8px; }
  .lk-pr header b { font-size: 14px; }
  .lk-commits, .lk-branch { display: none; }
  .lk-diff { flex-wrap: wrap; gap: 6px; }
  .lk-brief { grid-area: brief; padding: 12px; gap: 8px; }
  .lk-brief dl div:nth-child(n+3) { display: none; }
  .lk-brief dd { font-size: 12.5px; }
  .lk-wire { display: none; }
  .lk-kit { grid-area: kit; gap: 8px; }
  .lk-piece { padding: 10px; gap: 6px; }
  .lk-art { height: 52px; }
  .lk-piece b { font-size: 12.5px; }
  .lk-merge { padding: 8px; font-size: 12px; }

  .pbs { height: 300vh; }
  .pbs-pin { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding: 84px 12px 20px; }
  .pbs-copy { padding: 0 8px; }
  .pbs-copy .sh__h { font-size: 38px; }
  .pbs-copy .lede { font-size: 14.5px; margin-top: 10px; }
  .pbs-count { margin-top: 10px; }
  .pb { aspect-ratio: 1000 / 900; border-radius: 22px; }
  .pb-jack__label { display: none; }
  .pb-jack__plate { width: 28px; height: 28px; border-radius: 8px; }
  .pb-jack__plate svg { width: 15px; height: 15px; }
  .pb-jack--agent .pb-jack__plate { width: 34px; height: 34px; }
  .pb-jack--agent .pb-jack__plate .monad-svg { width: 24px; height: 24px; }
  .pb-jack__hole { width: 11px; height: 11px; }







                    .wl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter); }
  .wl-tabs .pill { flex: 0 0 auto; }
  .wl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wl { border-radius: 16px; padding: 10px; }
  .wl b { font-size: 11.5px; }
  .wl__i { width: 26px; height: 26px; }
  .ide { height: 360vh; }




        .ggs-pin { padding: 84px var(--gutter) 20px; }
  .mk-in { padding: 76px 0 20px; min-height: 0; gap: 12px; }
  .mk-head, .mk-bar { padding: 0 var(--gutter); }
  .mk-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mk-h { font-size: 34px; }
  .mk-h span { white-space: normal; }
  .mk-lede { font-size: 14px; }
  .mk-tabs button { padding: 7px 10px; font-size: 12px; }
  .mk-note { display: none; }
  .sb-inner { grid-template-columns: minmax(0, 1fr); }
  .sb-fan { height: 320px; }
  .sb-card { width: 110px; height: 150px; margin-left: -55px; }
  .sb-card svg { width: 26px; height: 26px; }
  .sb-card b { font-size: 11px; }
}
@media (max-width: 760px) and (max-height: 720px) { .mk-lede { display: none; } }
@media (max-width: 900px) and (max-height: 720px) {
  .lk-art, .lk-diff, .lk-who { display: none; }
  .lk-brief dl div:nth-child(n+2) { display: none; }
  .ggs-pin .h { font-size: 30px; }
}























@keyframes vq-sway { 50% { rotate: 6deg; } }





































































































/* ---- Marketplace (js/tl/market.js): one card system. A tinted cover with the listing's live faces,
   then the same body for every kind; the kind only changes what the cover shows. ---- */
.mk-shelf { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 12px; }
.mk-shelf:not([data-f="all"]) .mk-p:not([data-k]),
.mk-shelf[data-f="tool"] .mk-p[data-k]:not([data-k="tool"]),
.mk-shelf[data-f="routine"] .mk-p[data-k]:not([data-k="routine"]),
.mk-shelf[data-f="agent"] .mk-p[data-k]:not([data-k="agent"]) { opacity: 0.18; filter: saturate(0); pointer-events: none; }
.mk-p { --c: #c9a661; position: relative; min-height: 0; display: grid; grid-template-rows: 132px auto; border-radius: 22px; overflow: hidden; background: #1a1916;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); transition: transform 300ms var(--ease-out), box-shadow 300ms, opacity 300ms, filter 300ms; }
@media (hover: hover) and (pointer: fine) { .mk-p:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 30px 50px -30px color-mix(in srgb, var(--c) 50%, #000); } }

/* The cover. */
.mk-cover { position: relative; min-height: 104px; display: grid; place-items: center; padding: 40px 14px 12px;
  background: radial-gradient(90% 90% at 50% 100%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), color-mix(in srgb, var(--c) 16%, #141310);
  background-image: radial-gradient(90% 90% at 50% 100%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.3px); background-size: auto, 14px 14px; }
.mk-tags { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mk-kind { padding: 3px 8px; border-radius: 6px; font-size: 10px; background: rgba(10,10,10,0.45); color: #f1f0eb; backdrop-filter: blur(4px); }
.mk-meta { padding: 3px 8px; border-radius: 6px; font-size: 10px; background: rgba(10,10,10,0.35); color: #e9e6dd; }
.mk-pick { padding: 3px 8px; border-radius: 6px; font-size: 10px; background: var(--gold); color: #1a160e; font-weight: 600; }
.mk-face { width: clamp(56px, 9vh, 84px); aspect-ratio: 1; }
.mk-face .agent-persona { width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(0,0,0,0.5)); }
/* A routine's cover is its crew, in order, handing work along. */
.mk-crew { display: flex; align-items: center; gap: 4px; }
.mk-crew span { width: clamp(38px, 6vh, 54px); aspect-ratio: 1; }
.mk-crew span .agent-persona { width: 100%; height: 100%; }
.mk-crew em { font-style: normal; color: rgba(255,255,255,0.45); font-size: 14px; }
/* A tool's cover is its install line and signature. */
.mk-sig { width: 100%; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(10,10,10,0.6); font-size: 11px; color: #e9e6dd; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.mk-sig span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sig span:first-child { color: #8f8b82; }
.mk-sig em { color: var(--c); font-style: normal; }
.mk-sig .is-ret { color: #8fd49a; }

/* The body: the same for every kind. */
.mk-body { display: grid; gap: 5px; padding: 10px 14px 12px; }
.mk-p:not(.is-big) .mk-line { -webkit-line-clamp: 1; max-height: 1.4em; }
.mk-body { align-content: start; }
.mk-p footer { align-self: end; }
.mk-name { font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -0.02em; line-height: 1.15; color: #f1f0eb; }
.mk-p--tool .mk-name { font-family: var(--mono); font-size: clamp(13px, 1vw, 15px); color: var(--c); }
.mk-line { margin: 0; font-size: 12.5px; line-height: 1.4; color: #a19e95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-when { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #c9b88c; white-space: nowrap; overflow: hidden; }
.mk-days { display: flex; gap: 2px; }
.mk-days i { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 8.5px; background: rgba(255,255,255,0.06); color: #77736a; }
.mk-days i.is-on { background: var(--c); color: #0a0a0a; }
.mk-trig { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.mk-p footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.mk-maker { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8f8b82; }
.mk-maker > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-maker i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 30%, #23211c); color: #f1f0eb; }
.mk-ver { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #4D7FD1; color: #fff; font-size: 8px; font-style: normal; vertical-align: 1px; }
.mk-price { font-size: 11px; color: #8f8b82; white-space: nowrap; }
.mk-price b { font-size: 14px; color: #f1f0eb; }
.mk-get { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 12px var(--sans); background: var(--c); color: #0a0a0a; cursor: pointer; transition: transform 120ms; }
.mk-get:active { transform: scale(0.95); }
.mk-get.is-on { background: #2f8a4a; color: #fff; }

/* The staff pick: spans two rows, a big face at work and what it has done. */
.mk-p.is-big { grid-row: span 2; grid-template-rows: minmax(200px, 1fr) auto; }
.mk-p.is-big .mk-face { width: clamp(110px, 20vh, 170px); }
.mk-p.is-big .mk-name { font-size: clamp(22px, 2vw, 30px); }
.mk-p.is-big .mk-line { -webkit-line-clamp: 3; font-size: 13.5px; }
.mk-stats { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-stats div { padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,0.04); }
.mk-stats dt { font-size: 9px; color: #77736a; }
.mk-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #f1f0eb; }

/* What a creator is paid. */
.mk-p--pay { grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 14px; background: linear-gradient(160deg, #2b261b, #1a1813); box-shadow: inset 0 0 0 1px rgba(201,166,97,0.35); }
.mk-p--pay .mk-tags { position: static; }
.mk-total { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.04em; line-height: 1; color: var(--gold); }
.mk-total small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: #a19e95; margin-top: 4px; }
.mk-bars { min-height: 30px; display: flex; align-items: flex-end; gap: 4px; }
.mk-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(var(--gold), rgba(201,166,97,0.35)); transform-origin: bottom; animation: mk-grow 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes mk-grow { from { transform: scaleY(0); } }
.mk-p--pay .mk-line { font-size: 11.5px; }

@media (max-width: 900px) {
  .mk-shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .mk-p { flex: 0 0 74%; scroll-snap-align: center; grid-template-rows: 150px auto; }
  .mk-p.is-big { flex-basis: 84%; grid-template-rows: 190px auto; }
}

/* ---- The MCP server (js/tl/mcpfan.js): the security chapter's grammar. One sentence, a row of
   three (editor, wire, agent), one thing moving; the last beat lays out every tool by job. ---- */
.ide-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; gap: 2vh; padding: 92px var(--gutter) 26px; max-width: 1400px; margin: 0 auto; color: var(--night-text); text-align: center; }
.ide-head .ch__k { color: var(--gold); }
.ide-h { margin: 6px 0 0; font: 600 clamp(18px, 1.5vw, 24px)/1.2 var(--sans); letter-spacing: -0.02em; color: #a19e95; }
.ide-say { margin: 0; min-height: 2.3em; max-width: 24ch; font: 600 clamp(30px, 3.6vw, 58px)/1.08 var(--sans); letter-spacing: -0.04em; color: #f1f0eb; text-wrap: balance; }



















































@media (max-width: 900px) {
  .ide-pin { padding: 80px 14px 18px; gap: 12px; }
  .ide-say { font-size: 26px; }









}

/* MCP scene parts (js/tl/mcpfan.js). Movers are placed by transform from JS; nothing here animates layout. */
.ms-stage { position: relative; width: 100%; min-height: 0; display: grid; place-items: center; }
.ms-row { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(70px, 0.6fr) minmax(0, 1fr); align-items: center; will-change: transform, opacity; }
.ms-editor, .ms-agent { margin: 0; display: grid; justify-items: center; gap: 14px; }
.ms-editor figcaption, .ms-agent figcaption { display: grid; gap: 3px; font-size: 17px; font-weight: 600; color: #f1f0eb; }
.ms-editor small, .ms-agent small { font-size: 11px; font-weight: 400; color: #77736a; }

/* The editor: a window whose transcript builds up, ask by ask. */
.ms-win { width: min(100%, 480px); display: grid; border-radius: 18px; overflow: hidden; background: #171613; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 70px -30px rgba(0,0,0,0.9); text-align: left; }
.ms-win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1f1d19; }
.ms-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a362f; }
.ms-win__bar b { margin-left: auto; font-size: 10.5px; font-weight: 400; color: #6f6b63; transition: color 300ms; }
.is-connected .ms-win__bar b { color: #8fd49a; }
.ms-win__body { position: relative; height: clamp(190px, 30vh, 260px); overflow: hidden; }
.ms-win__body::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1; background: linear-gradient(#171613, transparent); }
.ms-log { display: grid; gap: 14px; padding: 16px 18px 18px; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.ms-cmd { font-size: 12px; line-height: 1.5; color: #c9c5bb; word-break: break-all; transition: opacity 400ms; }
.ms-cmd em { font-style: normal; color: var(--gold); }
.ms-cmd u { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -0.2em; background: var(--gold); text-decoration: none; animation: live 1s steps(1) infinite; }
.is-connected .ms-cmd { opacity: 0.45; }
.is-connected .ms-cmd u { display: none; }
.ms-turn { display: none; gap: 8px; }
.ms-turn.is-asked { display: grid; }
.ms-q { justify-self: end; max-width: 88%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #2a2823; font: 600 clamp(15px, 1.25vw, 18px)/1.3 var(--sans); letter-spacing: -0.015em; color: #f1f0eb; }
.ms-a { display: grid; gap: 2px; padding: 10px 13px; border-radius: 12px; background: #f1f0eb; color: #0a0a0a; box-shadow: inset 3px 0 0 var(--c); visibility: hidden; transform-origin: 0 50%; }
.ms-turn.is-answered .ms-a { visibility: visible; }
.ms-a b { font-size: 15px; letter-spacing: -0.015em; }
.ms-a small { font-size: 10px; color: #6f6b63; }

/* The wire: dashed when idle; lit outwards for the call and back for the answer. */
.ms-wire { position: relative; height: 2px; margin: 0 -8px; border-top: 2px dashed rgba(255,255,255,0.12); transition: border-color 400ms; }
.is-connected .ms-wire { border-top-color: rgba(201,166,97,0.35); }
.ms-wire i { position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--gold); transform: scaleX(0); box-shadow: 0 0 14px rgba(201,166,97,0.6); }

/* The movers. */
.ms-call, .ms-answer { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ms-call { padding: 10px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: #0a0a0a; background: var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 60%, transparent); }
.ms-answer { padding: 10px 14px; border-radius: 12px; white-space: nowrap; background: #f1f0eb; color: #0a0a0a; box-shadow: 0 24px 40px -20px rgba(0,0,0,0.9), inset 3px 0 0 var(--c); }
.ms-answer b { font-size: 15px; letter-spacing: -0.015em; }

/* The agent: one face at a time, a ring that fills while it works. */
.ms-faces { position: relative; width: clamp(140px, 15vw, 210px); aspect-ratio: 1; }
.ms-face { position: absolute; inset: 0; opacity: 0; transform: scale(0.94); filter: blur(4px); transition: opacity 240ms, transform 320ms cubic-bezier(0.23, 1, 0.32, 1), filter 240ms; }
.ms-face.is-on { opacity: 1; transform: none; filter: none; }
.ms-face .agent-persona { width: 100%; height: 100%; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.6)); }
.ms-ring { position: absolute; inset: -9%; width: 118%; height: 118%; opacity: 0; transition: opacity 200ms; transform: rotate(-90deg); }
.ms-ring circle { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }









@media (max-width: 900px) {
  .ms-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ms-wire { display: none; }
  .ms-faces { width: 96px; }
  .ms-win__body { height: 150px; }



}

/* Hero patch bay: each agent jack is the agent itself, its face filling the whole circle. */
.pb-jack--agent .pb-jack__plate { width: 52px; height: 52px; background: none; box-shadow: none; overflow: visible; }
.pb-jack--agent .pb-jack__plate .agent-persona { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(20,20,30,0.22)); }
.pb-jack--agent.is-on .pb-jack__plate { box-shadow: 0 0 0 2px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent); }
@media (max-width: 900px) { .pb-jack--agent .pb-jack__plate { width: 36px; height: 36px; } }

/* The MCP finale: one stack of job cards. Cards are placed by transform from JS. */
/* The finale (js/tl/mcp-finales.js): one take fills the stage. */
.ms-all { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.mf-you { display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: #f1f0eb; color: #0a0a0a; font: 700 calc(var(--s) * 0.26) var(--sans); }
.ms-all .agent-persona { filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)); }

/* wall */
.ms-all[data-take="wall"] { grid-template-rows: minmax(0, 1fr) auto; gap: 18px; place-items: stretch; align-content: center; }
.mf-wall { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px 14px; max-width: 1100px; margin: 0 auto; }
.mf-wall i { font-style: normal; font-size: 14px; line-height: 1.5; color: #34322d; transition: color 260ms var(--ease-out); }
.mf-wall i.is-on { color: color-mix(in srgb, var(--c) 70%, #8f8b82); }
.mf-wall i.is-new { color: var(--c); }
.mf-crew { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 34px); }
.mf-member { margin: 0; display: grid; justify-items: center; gap: 6px; opacity: 0.45; transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out); }
.mf-member.is-done { opacity: 0.85; } .mf-member.is-on { opacity: 1; transform: scale(1.12) translateY(-4px); }
.mf-member figcaption { display: grid; font-size: 13px; font-weight: 600; color: #f1f0eb; }
.mf-member small { font-size: 10.5px; font-weight: 400; color: #77736a; } .mf-member small b { color: var(--c); }

/* palette */
.mf-pal { width: min(720px, 94%); height: min(100%, 520px); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: #171613; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 70px -30px rgba(0,0,0,0.9); text-align: left; }
.mf-pal header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1f1d19; }
.mf-pal header i { width: 10px; height: 10px; border-radius: 50%; background: #3a362f; }
.mf-pal header span { margin-left: 8px; font-size: 12px; color: var(--gold); }
.mf-pal header b { margin-left: auto; font-size: 11px; font-weight: 400; color: #8fd49a; }
.mf-pal header em { font-style: normal; font-variant-numeric: tabular-nums; color: #f1f0eb; }
.mf-pal__view { position: relative; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.mf-pal__list { list-style: none; margin: 0; padding: 0 18px; will-change: transform; }
.mf-pal__read { position: absolute; left: 10px; right: 10px; top: 50%; height: 34px; margin-top: -17px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(201,166,97,0.35); background: rgba(201,166,97,0.05); }
.mf-g { display: flex; align-items: center; gap: 10px; padding: 16px 0 6px; color: #77736a; }
.mf-g b { font-size: 14px; color: #a19e95; } .mf-g .mono { margin-left: auto; font-size: 10.5px; }
.mf-g .agent-persona, .mf-g .mf-you { width: 22px; height: 22px; }
.mf-g.is-on b { color: var(--c); }
.mf-t { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 14px; align-items: center; height: 30px; padding-left: 32px; font-size: 13px; color: #4a4740; transition: color 200ms; }
.mf-t code { font-size: 12.5px; }
.mf-t.is-on { color: #a19e95; } .mf-t.is-on code { color: color-mix(in srgb, var(--c) 75%, #f1f0eb); }
.mf-t.is-new { color: #f1f0eb; } .mf-t.is-new code { color: var(--c); }

/* app */
.mf-app { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: 40px; align-items: center; text-align: left; }
.mf-app__ed { display: grid; gap: 12px; padding-bottom: 16px; border-radius: 16px; overflow: hidden; background: #171613; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -30px rgba(0,0,0,0.9); }
.mf-app__ed header { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1f1d19; }
.mf-app__ed header i { width: 9px; height: 9px; border-radius: 50%; background: #3a362f; }
.mf-app__ed header span { margin-left: auto; font-size: 10.5px; color: #6f6b63; }
.mf-app__ed p { margin: 0 14px; font-size: 12.5px; color: #c9c5bb; }
.mf-app__ed em { font-style: normal; color: var(--gold); }
.mf-app__n b { display: block; font: 600 54px/1 var(--sans); letter-spacing: -0.05em; color: #f1f0eb; font-variant-numeric: tabular-nums; }
.mf-app__n small { font-size: 10.5px; color: #77736a; }
.mf-app__screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mf-scr { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #181714; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); opacity: 0.45; transition: opacity 250ms, box-shadow 250ms, transform 250ms var(--ease-out); }
.mf-scr.is-on { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), inset 0 3px 0 var(--c); }
.mf-scr.is-hit { transform: scale(1.04); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 30px color-mix(in srgb, var(--c) 35%, transparent); }
.mf-scr header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mf-scr header b { font-size: 13.5px; color: #f1f0eb; } .mf-scr header .mono { font-size: 10.5px; color: #77736a; } .mf-scr header em { font-style: normal; color: var(--c); }
.mf-scr__ui { display: grid; gap: 5px; } .mf-scr__ui i { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); } .mf-scr__ui i:nth-child(odd) { width: 70%; }
.mf-scr.is-on .mf-scr__ui i:first-child { background: color-mix(in srgb, var(--c) 45%, transparent); }
.mf-scr__last { margin: 0; min-height: 1.3em; font-size: 10.5px; color: #a19e95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-app__pill { position: absolute; left: 0; top: 0; z-index: 2; padding: 7px 12px; border-radius: 999px; background: var(--c); color: #0a0a0a; font-size: 12px; white-space: nowrap; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); }

/* orbit */
.mf-orb { position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; }
.mf-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mf-orb line { stroke: rgba(255,255,255,0.08); stroke-width: 0.25; }
.mf-orb circle { fill: none; stroke: rgba(201,166,97,0.25); stroke-width: 0.25; stroke-dasharray: 0.8 1.2; }
.mf-orb__chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; }
.mf-orb__chip .agent-persona { width: 92px; height: 92px; }
.mf-orb__chip b { font-size: 12px; font-weight: 400; color: #77736a; } .mf-orb__chip em { font-style: normal; font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.mf-orb__m { position: absolute; margin: 0; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; opacity: 0.6; transition: opacity 250ms, transform 300ms var(--ease-out); }
.mf-orb__m .agent-persona, .mf-orb__m .mf-you { width: 50px; height: 50px; }
.mf-orb__m figcaption { display: grid; justify-items: center; font-size: 11.5px; font-weight: 600; color: #f1f0eb; white-space: nowrap; }
.mf-orb__m small { font-size: 10px; font-weight: 400; color: #77736a; } .mf-orb__m small b { color: var(--c); }
.mf-orb__m.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
.mf-dot { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #2a2823; transition: background-color 200ms, box-shadow 200ms; }
.mf-dot span { position: absolute; left: 12px; top: -5px; font-size: 9.5px; color: #f1f0eb; white-space: nowrap; opacity: 0; transition: opacity 200ms; }
.mf-dot.is-on { background: var(--c); }
.mf-dot.is-new { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 14px var(--c); } .mf-dot.is-new span { opacity: 1; }

@media (max-width: 900px) {
  .mf-wall { gap: 3px 8px; } .mf-wall i { font-size: 9.5px; }
  .mf-crew { flex-wrap: wrap; gap: 8px 12px; } .mf-member .agent-persona, .mf-member .mf-you { width: 38px; height: 38px; }
  .mf-t { grid-template-columns: minmax(0, 1fr); height: 26px; padding-left: 26px; } .mf-t span { display: none; }
  .mf-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; align-content: start; }
  .mf-app__n b { font-size: 34px; } .mf-app__screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mf-scr { padding: 8px; gap: 5px; } .mf-scr__ui { display: none; }
  .mf-orb { height: auto; width: 100%; } .mf-orb__chip .agent-persona { width: 56px; height: 56px; }
  .mf-orb__m .agent-persona, .mf-orb__m .mf-you { width: 32px; height: 32px; } .mf-orb__m figcaption { font-size: 9.5px; }
  .mf-dot span { display: none; }
}
/* The plate's 20px rule is for app logos; a face's own drawing fills its box. */
.pb-jack--agent .pb-jack__plate .agent-persona > svg { width: 100%; height: 100%; }













































































































/* ---- The app popup (js/tl/wall.js): a card over a blurred backdrop, dressed in the app's colour. ---- */
.wl-locked { overflow: hidden; }
.wl-pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(14, 13, 11, 0.5); backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 220ms; }
.wl-pop.is-open { opacity: 1; visibility: visible; transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.wl-pop__card { width: min(920px, 100%); max-height: min(86vh, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 28px; background: #faf9f6;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.4) inset; transform: translateY(14px) scale(0.97); transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1); }
.wl-pop.is-open .wl-pop__card { transform: none; }

.wl-pop__hero { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 28px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--b) 70%, #fff), var(--b) 55%, color-mix(in srgb, var(--b) 70%, #000)); }
.wl-pop__art { position: absolute; right: -40px; top: -50px; width: 260px; height: 260px; opacity: 0.16; rotate: -12deg; pointer-events: none; }
.wl-pop__art svg { width: 100%; height: 100%; fill: #fff; }
.wl-pop__i { position: relative; flex: none; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: #fff; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.5); }
.wl-pop__i svg { width: 42px; height: 42px; fill: var(--b); }
.wl-pop__t { position: relative; display: grid; gap: 2px; }
.wl-pop__t .mono { font-size: 11px; opacity: 0.75; letter-spacing: 0.08em; text-transform: uppercase; }
.wl-pop__t b { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1; }
.wl-pop__t > span:last-child { font-size: 14px; opacity: 0.85; }
.wl-pop__x { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: #fff; background: rgba(0,0,0,0.22); cursor: pointer; transition: background-color 150ms; }
@media (hover: hover) and (pointer: fine) { .wl-pop__x:hover { background: rgba(0,0,0,0.4); } }

.wl-pop__body { min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; padding: 24px 28px; }
.wl-pop__h { margin: 0 0 10px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-3); }
.wl-pop__jobs { display: grid; gap: 10px; align-content: start; }
.wl-job { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), inset 3px 0 0 var(--c);
  opacity: 0; transform: translateY(8px); }
.wl-pop.is-open .wl-job { animation: wl-in 360ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.wl-pop.is-open .wl-job:nth-child(3) { animation-delay: 50ms; } .wl-pop.is-open .wl-job:nth-child(4) { animation-delay: 100ms; }
@keyframes wl-in { to { opacity: 1; transform: none; } }
.wl-job__f { width: 44px; height: 44px; }
.wl-job__f .agent-persona { width: 100%; height: 100%; }
.wl-job small { font-size: 10.5px; color: color-mix(in srgb, var(--c) 75%, #0a0a0a); }
.wl-job b { display: block; margin: 2px 0 6px; font-size: 15.5px; letter-spacing: -0.015em; }
.wl-job q { display: block; quotes: none; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--c) 8%, #faf9f6); }

.wl-pop__side { display: grid; gap: 20px; align-content: start; }
.wl-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-steps li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; }
.wl-steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); color: #fff; background: var(--b); }
.wl-scopes { margin: 0; display: grid; gap: 6px; }
.wl-scopes div { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); font-size: 13.5px; }
.wl-scopes dt { font: 600 11px var(--mono); color: var(--ink); }
.wl-scopes dd { margin: 0; color: var(--ink-soft); }
.wl-wakes { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wl-wakes span { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--b) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 30%, transparent); }

.wl-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-top: 1px solid var(--hairline); background: #fff; }
.wl-pop__foot .mono { font-size: 11px; color: var(--grey-3); }

@media (max-width: 760px) {
  .wl-pop { padding: 0; align-items: end; }
  .wl-pop__card { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .wl-pop__body { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .wl-pop__hero { padding: 20px; } .wl-pop__i { width: 56px; height: 56px; }
  .wl-pop__foot { flex-direction: column; align-items: stretch; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) { .wl-pop__card { transform: none; } .wl-pop.is-open .wl-job { animation-duration: 1ms; } }