/* The workbench. zoo.dev's layout (a viewport with corner handles, mono labels, a gizmo) on the
   site's cobalt, with white and pastel cards (clay.com's tinted sections), chunky buttons, stickers. */
.wx-body {
  --page: #4a6cf0; --bg: #f1ece4; --bg-2: #ffffff; --bg-3: #e9e2d6; --line-d: rgba(20,20,20,.09); --line-d2: rgba(20,20,20,.18);
  --fg-d: #141414; --fg-dim: #6a655e; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --handle: #1fa870; --corner: #ff6a2b; --inv-bg: #141414; --inv-fg: #f1ece4; --glass: rgba(255,255,255,.82); --card-bg: #ffffff; --card-line: rgba(20,20,20,.1);
  --press: 0 4px 0 rgba(20,20,40,.35);
  background: var(--page); color: var(--fg-d); height: 100svh; overflow: hidden; display: flex; flex-direction: column;
}
.wx-body ::selection { background: var(--yellow); color: var(--ink); }

/* top bar */
.wx-top { display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 2vw, 24px) 6px; background: transparent; position: relative; z-index: 30; color: var(--cream); }
.wx-project { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.wx-sep { color: rgba(241,236,228,.6); font-weight: 300; font-size: 20px; }
.wx-name { border: 0; background: transparent; color: var(--cream); font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: -.01em; padding: 4px 8px; border-radius: 8px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-name:hover { background: rgba(241,236,228,.16); }
.wx-ver { font-family: var(--mono); font-size: 11px; color: rgba(241,236,228,.75); letter-spacing: .02em; white-space: nowrap; }
.wx-ver.saving { color: var(--yellow); }
.wx-actions { display: flex; align-items: center; gap: 8px; }
.wx-avatars { display: flex; align-items: center; margin-right: 6px; }
.wx-avatars i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-weight: 800; font-size: 12px; display: grid; place-items: center; border: 2px solid var(--cream); margin-right: -8px; }
.wx-avatars i:first-child { background: var(--yellow); color: var(--ink); }
.wx-invite { margin-left: 14px; border: 1.5px dashed rgba(241,236,228,.6); background: transparent; color: var(--cream); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.wx-invite:hover { background: var(--cream); color: var(--ink); border-style: solid; }
.wx-btn { border: 0; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 13px; transition: background .15s, transform .12s; text-decoration: none; box-shadow: var(--press); }
.wx-btn:hover { background: var(--yellow); transform: translateY(-1px); }
.wx-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,20,40,.35); }
.wx-btn.primary { background: var(--orange); color: #fff; }
.wx-btn.primary:hover { background: #ff7c45; }
.wx-btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.wx-menu-wrap { position: relative; }
.wx-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--card-bg); color: var(--ink); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg); display: grid; z-index: 40; animation: wx-pop .18s cubic-bezier(.2,1.4,.4,1) both; }
.wx-menu[hidden] { display: none; }
.wx-menu > [hidden] { display: none; }
.wx-menu > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; background: transparent; color: inherit; text-decoration: none; font-weight: 700; font-size: 14px; padding: 9px 10px; border-radius: 9px; text-align: left; cursor: pointer; }
.wx-menu > *:hover { background: var(--yellow); }
.wx-menu small { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }
@keyframes wx-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* layout. The columns are minmax(0, 1fr), not 1fr: a 1fr track's minimum is its content's min-content width, and the
   timeline's ten steps are about 900 px wide before they scroll, so a plain 1fr pushed the page 628 px past a phone's
   edge. min-width: 0 on the three cells for the same reason. */
.wx { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 6px 12px 12px; position: relative; }
.wx .deco.slap { z-index: 7; width: clamp(56px, 5.5vw, 84px); }
.wx-view { grid-row: 1; grid-column: 1; min-width: 0; }
/* the chat and the timeline paint over the stickers (z 7): a sticker at their edge tucks behind them instead of
   covering a button (the heart sat on the chat's Start over) */
.wx-chat { grid-row: 1 / span 2; grid-column: 2; min-width: 0; position: relative; z-index: 8; }
.wx-timeline { grid-row: 2; grid-column: 1; min-width: 0; position: relative; z-index: 8; }
@media (max-width: 900px) {
  .wx-body { height: auto; overflow-x: hidden; overflow-y: auto; }
  .wx { grid-template-columns: minmax(0, 1fr); grid-template-rows: 62svh auto auto; }
  .wx .deco.slap { display: none; }
  .wx-view { grid-row: 1; } .wx-timeline { grid-row: 2; grid-column: 1; }
  /* the chat keeps a screen's height and scrolls inside, so the newest reply and the box to type in stay together
     (unbounded, it grew the page to 4,600 px and the box sat at the far end) */
  .wx-chat { grid-row: 3; grid-column: 1; height: 72svh; min-height: 0; }
  .wx-actions .wx-btn:not(.primary):not(.wx-more), .wx-avatars, .wx-actions .wx-menu-wrap:has(> #btn-export) { display: none; }
  /* the page scrolls on a phone: the header stays on top, so its logo and buttons are always in reach */
  .wx-top { gap: 8px; padding-top: 8px; position: sticky; top: 0; background: var(--page); padding-bottom: 6px; }
  .wx-project { gap: 6px; }
  .wx-name { max-width: none; min-width: 0; flex: 0 1 auto; }
  .wx-actions { gap: 6px; margin-left: auto; }
  .wx-btn { padding: 9px 12px; }
}
/* a phone's header is two rows: the logo and the buttons, then the thing's name and its version, so neither is clipped */
@media (max-width: 600px) {
  .wx-top { flex-wrap: wrap; row-gap: 0; }
  .wx-project { flex: 1 1 100%; order: 3; padding: 2px 0 0 4px; }
  .wx-sep { display: none; }
  .wx-name { padding-left: 4px; }
}
/* the ⋯ menu holds what the phone header has no room for: Accounts, Share and the exports */
.wx-more { display: none; padding: 9px 12px; font-size: 16px; line-height: 1; }
#menu-more { min-width: 236px; }
@media (max-width: 900px) { .wx-more { display: inline-flex; align-items: center; } }
@media (max-width: 420px) { .wx-btn.primary { padding: 9px 11px; font-size: 12px; } }

/* the viewport */
.wx-view { position: relative; border-radius: 22px; background: radial-gradient(120% 90% at 50% 100%, #ffffff 0%, #f8f5f0 55%, #ebe5db 100%); overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(20,20,40,.1), 0 16px 40px rgba(20,20,80,.25); }
.wx-view::before { /* the floor grid */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; transition: opacity .3s;
  background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center; mask-image: radial-gradient(70% 70% at 50% 60%, #000 30%, transparent 100%);
}
.wx-view::before { opacity: .9; }
.wx-view.no-grid::before { opacity: 0; }
.wx-view > model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; --poster-color: transparent; background: transparent; transition: opacity .4s, filter .4s; }
.wx-view > model-viewer.dim { opacity: .25; filter: blur(3px); }
.wx-view > model-viewer.pop { animation: wx-model-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes wx-model-pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.wx-corner { position: absolute; width: 16px; height: 16px; border: 3px solid var(--corner); border-radius: 2px; z-index: 3; pointer-events: none; opacity: .9; }
.wx-corner.tl { left: 12px; top: 12px; border-right: 0; border-bottom: 0; }
.wx-corner.tr { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.wx-corner.bl { left: 12px; bottom: 12px; border-right: 0; border-top: 0; }
.wx-corner.br { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.wx-view.busy .wx-corner { animation: wx-blink 1s steps(2) infinite; }
@keyframes wx-blink { 50% { opacity: .3; } }

.wx-hud { position: absolute; left: 22px; right: 22px; top: 18px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.wx-hud > * { pointer-events: auto; }
.wx-hud-l { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); letter-spacing: .04em; text-transform: uppercase; }
.wx-live { display: inline-flex; align-items: center; gap: 6px; color: var(--handle); }
.wx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--handle); animation: pulse 1.4s infinite; }
.wx-partname { color: var(--fg-d); font-weight: 500; }
.wx-hud-r { display: flex; gap: 2px; background: var(--yellow); border-radius: 999px; padding: 3px; box-shadow: 0 2px 0 rgba(20,20,40,.2); }
.wx-tab { border: 0; background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 12px; }
.wx-tab:hover, .wx-tab[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.wx-ref { position: absolute; left: 22px; top: 46px; z-index: 4; font-family: var(--mono); font-size: 10px; color: var(--fg-dim); letter-spacing: .04em; opacity: .8; }

/* parts rail, left */
.wx-parts { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 6px; }
.wx-parts button { border: 0; background: var(--cream); color: var(--ink); border-radius: 14px; box-shadow: 0 2px 0 rgba(20,20,40,.18); padding: 8px 10px; font-weight: 700; font-size: 12px; text-align: left; display: grid; gap: 2px; min-width: 96px; transition: transform .15s, background .15s, color .15s; }
.wx-parts button small { font-family: var(--mono); font-weight: 400; font-size: 10px; opacity: .7; }
.wx-parts button:hover { transform: translateX(3px); color: var(--fg-d); }
.wx-parts button[aria-pressed="true"] { background: var(--cobalt); color: #fff; }
.wx-parts button[aria-pressed="true"] small { opacity: .8; }
.wx-parts button.new { animation: wx-pop .4s cubic-bezier(.2,1.5,.4,1) both; }

/* bottom tools */
.wx-tools { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; display: flex; gap: 2px; background: var(--cream); box-shadow: var(--press); border-radius: 999px; padding: 4px; }
.wx-tools button { border: 0; background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s, transform .12s; }
.wx-tools button span { font-size: 12px; }
.wx-tools button:hover { background: #fff; transform: translateY(-1px); }
.wx-tools button[aria-pressed="true"] { background: var(--cobalt); color: #fff; }
@media (max-width: 1100px) { .wx-tools button span { display: none; } }

/* measure overlay: the lines are pinned to the model's box (model-viewer hotspots, workbench.js), so they tilt and spin with it */
.wx-measure { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--mono); font-size: 11px; color: var(--orange); }
.wx-measure[hidden] { display: none; }
.wx-measure svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wx-measure line { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 4; }
.wx-measure circle { fill: currentColor; }
.wx-measure b { position: absolute; left: 0; top: 0; background: var(--inv-bg); padding: 2px 6px; border-radius: 6px; font-weight: 500; white-space: nowrap; transform: translate(-50%, -50%); }
.m-pt { position: absolute; width: 1px; height: 1px; pointer-events: none; opacity: 0; }

/* the view cube */
.wx-cube { position: absolute; right: 22px; top: 64px; z-index: 5; display: grid; justify-items: center; gap: 6px; user-select: none; touch-action: none; }
.wx-cube-stage { width: 92px; height: 92px; perspective: 420px; display: grid; place-items: center; cursor: grab; }
.wx-cube-stage:active { cursor: grabbing; }
.wx-cube3d { --s: 52px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transition: transform .12s linear; }
.wx-cube3d.snap { transition: transform .55s cubic-bezier(.2,1.3,.4,1); }
.wx-cube3d.bounce { animation: wx-cube-bounce .6s cubic-bezier(.3,1.6,.4,1); }
@keyframes wx-cube-bounce { 30% { scale: 1.18; } 60% { scale: .94; } }
.wx-cube3d .f { position: absolute; inset: 0; border: 0; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(20,20,20,.75); box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.18); backface-visibility: hidden; cursor: pointer; transition: filter .15s; padding: 0; }
.wx-cube3d .f:hover { filter: brightness(1.12); }
.f-front { background: var(--cobalt); transform: translateZ(calc(var(--s) / 2)); color: rgba(241,236,228,.85); }
.f-back { background: var(--mint); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f-right { background: var(--orange); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f-left { background: var(--pink); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f-top { background: var(--yellow); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f-bottom { background: #3a3835; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); color: rgba(241,236,228,.7); }
.f-front small { position: absolute; bottom: 4px; }
.smile { position: relative; width: 26px; height: 18px; display: block; }
.smile i { position: absolute; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-d); animation: wx-wink 5s infinite; }
.smile i:first-child { left: 3px; } .smile i:nth-child(2) { right: 3px; }
.smile b { position: absolute; left: 5px; right: 5px; bottom: 1px; height: 8px; border: 2.5px solid var(--fg-d); border-top: 0; border-radius: 0 0 12px 12px; }
@keyframes wx-wink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .15; } }
.wx-home { border: 0; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 9px; font-weight: 800; font-size: 12px; box-shadow: 0 2px 0 rgba(20,20,40,.2); display: inline-flex; align-items: center; gap: 5px; transition: background .15s, transform .15s; }
.wx-home span { font-size: 14px; line-height: 1; }
.wx-home:hover { background: var(--yellow); color: var(--ink); transform: translateY(-1px) rotate(-2deg); }
.wx-home.go { animation: wx-home-go .5s cubic-bezier(.3,1.6,.4,1); }
@keyframes wx-home-go { 40% { scale: 1.2; rotate: -8deg; } }

/* the first build draws a schematic sheet instead of showing a product */
.wx-draft { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .4s; fill: none; stroke: #4b5bd6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-view.drafting .wx-draft { opacity: .8; }
/* while the sheet draws, the progress sits in a small card under the drawing, never on top of it */
.wx-view.drafting .wx-loading { align-content: end; padding-bottom: 28px; background: none; backdrop-filter: none; }
.wx-view.drafting .wx-ring { display: none; }
.wx-view.pre-draft > model-viewer, .wx-view.drafting > model-viewer, .wx-view.drafting > model-viewer.dim, .wx-view.drafting > model-viewer.pop { opacity: 0; animation: none; transition: none; }
.wx-draft .dr-faint { stroke: #4b5bd6; stroke-width: 1; opacity: .35; }
.wx-draft .dr-draw * { stroke-dasharray: 900; stroke-dashoffset: 900; }
.wx-view.drafting .wx-draft .dr-draw * { animation: wx-draw 2.6s cubic-bezier(.4,0,.2,1) forwards; }
.wx-draft .dr-draw *:nth-child(2n) { animation-delay: .25s !important; } .wx-draft .dr-draw *:nth-child(3n) { animation-delay: .5s !important; }
.wx-draft .dr-dim { stroke-width: 1; opacity: .7; } .wx-draft .dr-dim text { fill: #4b5bd6; stroke: none; font: 700 13px var(--head, sans-serif); }
@keyframes wx-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .wx-draft .dr-draw * { stroke-dashoffset: 0; animation: none !important; } }

/* loading overlay */
.wx-loading { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; padding: 16px; background: rgba(255,255,255,.55); backdrop-filter: blur(3px); }
.wx-loading[hidden] { display: none; }
.wx-loading-card { display: grid; justify-items: center; gap: 10px; min-width: 260px; padding: 16px 22px 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20,20,40,.08), 0 12px 32px -10px rgba(20,20,60,.28); text-align: center; animation: wx-card-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wx-card-in { from { opacity: 0; transform: translateY(8px); } }
.wx-ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,106,43,.18); border-top-color: var(--orange); animation: spin .9s linear infinite; }
.wx-loading-stage { font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--fg-d); }
.wx-loading-bar { width: 220px; height: 6px; border-radius: 999px; background: #eee8df; overflow: hidden; }
.wx-loading-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--yellow)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .wx-loading-card { animation: none; } }
.wx-toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(10px); z-index: 8; background: var(--inv-bg); color: var(--inv-fg); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--shadow); }
.wx-toast.on { opacity: 1; transform: translateX(-50%); }

/* the chat */
.wx-chat { display: flex; flex-direction: column; min-height: 0; border-radius: 22px; background: var(--bg-2); overflow: hidden; box-shadow: 0 1px 2px rgba(20,20,40,.1), 0 16px 40px rgba(20,20,80,.25); }
.wx-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--mint); color: var(--ink); }
.wx-bot { width: 32px; height: 32px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-fg); display: grid; place-items: center; }
.wx-chat-head b { display: block; font-family: var(--head); font-size: 15px; }
.wx-chat-head span { font-family: var(--mono); font-size: 11px; color: rgba(20,20,20,.65); }
.wx-chat-head div { flex: 1; min-width: 0; }
.wx-chat-clear { border: 0; background: transparent; color: var(--ink); font-size: 18px; border-radius: 8px; padding: 2px 8px; }
.wx-chat-clear:hover { background: #fff; }
.wx-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
.wx-msg { max-width: 92%; display: grid; gap: 8px; animation: wx-msg-in .35s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes wx-msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.wx-msg.me { align-self: flex-end; }
.wx-msg.me .wx-bubble { background: var(--cobalt); color: #fff; border-bottom-right-radius: 6px; }
.wx-msg.bot .wx-bubble { background: var(--bg-3); border-bottom-left-radius: 6px; }
.wx-msg.sys .wx-bubble { background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: center; padding: 2px; align-self: center; }
.wx-msg.sys { align-self: center; max-width: 100%; }
.wx-bubble { padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.wx-bubble b { font-weight: 800; }
.wx-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.wx-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: wx-dot 1s infinite; }
.wx-typing i:nth-child(2) { animation-delay: .15s; } .wx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wx-dot { 50% { transform: translateY(-4px); opacity: .5; } }
/* cards inside messages */
.wx-card { background: var(--bg); color: var(--ink); border-radius: 16px; padding: 12px; display: grid; gap: 8px; font-size: 13px; }
.wx-card h4 { margin: 0; font-family: var(--head); font-size: 15px; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wx-card h4 .wx-tag { font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wx-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wx-card li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1.5px dashed rgba(20,20,20,.14); }
.wx-card li b { font-weight: 700; }
.wx-card li small { font-family: var(--mono); color: var(--muted); font-size: 11px; }
.wx-card li.add { color: var(--cobalt-deep); animation: wx-pop .4s both; }
.wx-card .row { display: flex; gap: 6px; flex-wrap: wrap; }
.wx-card .row button, .wx-card .cta { border: 0; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 8px 13px; font-weight: 800; font-size: 12px; box-shadow: 0 3px 0 rgba(20,20,40,.3); transition: transform .12s, background .15s; }
.wx-card .row button:hover, .wx-card .cta:hover { background: var(--cobalt); transform: translateY(-1px); }
.wx-card .row button:active, .wx-card .cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20,20,40,.3); }
.wx-card .row button.ghost, .wx-card .cta.plain { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.2); }
.wx-card .cta.plain:hover { background: var(--yellow); color: var(--ink); }
.wx-card .row button.ghost:hover { background: var(--yellow); }
.wx-card .cta.orange { background: var(--orange); color: #fff; }
.wx-card .buy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wx-card .buy .cta { border-radius: 14px; line-height: 1.25; }
.wx-card .cta.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.2), 0 3px 0 rgba(20,20,40,.12); }
.wx-card .cta.ghost:hover { background: var(--yellow); }
.wx-card .plan li { border: 0; padding: 3px 0; color: var(--muted); }
.wx-card .plan li::before { content: "○ "; }
.wx-card .plan li.on { color: var(--ink); } .wx-card .plan li.on::before { content: "✓ "; color: var(--handle); }
.wx-card .plan li.run::before { content: "◌ "; color: var(--orange); animation: spin 1s linear infinite; display: inline-block; }
.wx-card .big { font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.wx-card .big small { font-size: 12px; color: var(--muted); font-family: var(--mono); font-weight: 400; margin-left: 6px; }
.wx-card pre { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; background: var(--ink); color: var(--cream); padding: 10px; border-radius: 10px; overflow-x: auto; }
.wx-card .snap { width: 100%; border-radius: 10px; background: var(--bg); display: block; }

.wx-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.wx-chips:empty { display: none; }
.wx-chips button { border: 0; background: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.18); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 12px; transition: background .15s, color .15s, transform .15s; animation: wx-pop .3s both; }
.wx-chips button:hover { background: var(--yellow); box-shadow: none; transform: translateY(-2px) rotate(-1deg); }
.wx-compose { display: flex; align-items: flex-end; gap: 6px; padding: 10px; border-top: 1px solid var(--line-d); background: var(--bg); }
.wx-compose textarea { flex: 1; min-width: 0; resize: none; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.15); background: #fff; color: var(--fg-d); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; max-height: 120px; outline: 0; } /* 16 px: under that iOS zooms the page on focus */
.wx-compose textarea:focus { box-shadow: inset 0 0 0 2px var(--cobalt), 0 0 0 4px rgba(255,210,63,.5); }
.wx-compose textarea::placeholder { color: #8a847c; }
.wx-send { border: 0; background: var(--inv-bg); color: var(--inv-fg); border-radius: 50%; width: 40px; height: 40px; font-weight: 800; font-size: 18px; box-shadow: var(--press); transition: transform .12s, box-shadow .12s, background .15s; }
.wx-send:hover { background: var(--orange); transform: translateY(-1px); }
.wx-send:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.wx-send[disabled] { opacity: .5; cursor: progress; }

/* the timeline */
.wx-timeline { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 22px; background: var(--yellow); color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,40,.1), 0 16px 40px rgba(20,20,80,.25); }
.wx-tl-groups { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wx-tl-groups::-webkit-scrollbar { display: none; }
.wx-tl-group { display: grid; gap: 6px; }
.wx-tl-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20,20,20,.6); padding-left: 2px; }
.wx-tl-group.sell .wx-tl-label::after { content: " · after the prototype"; opacity: .6; }
.wx-tl-group ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.wx-tl-group li { position: relative; min-width: 84px; padding: 0 4px; }
.wx-tl-group li > button { border: 0; background: transparent; padding: 0; display: grid; gap: 4px; justify-items: center; width: 100%; color: inherit; font: inherit; cursor: pointer; border-radius: 8px; }
.wx-tl-group li > button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.wx-tl-group li::before { /* the line */ content: ""; position: absolute; left: 50%; right: -50%; top: 7px; height: 2.5px; background: rgba(20,20,20,.2); }
.wx-tl-group li:last-child::before { display: none; }
.wx-tl-group.sell li::before { background: repeating-linear-gradient(90deg, rgba(20,20,20,.25) 0 6px, transparent 6px 11px); }
.wx-tl-group li i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid rgba(20,20,20,.3); display: grid; place-items: center; font-size: 9px; font-style: normal; color: var(--ink); transition: transform .2s, background .2s, border-color .2s; }
.wx-tl-group li b { font-size: 12px; font-weight: 800; color: rgba(20,20,20,.55); text-align: center; transition: color .2s; }
.wx-tl-group li small { font-family: var(--mono); font-size: 10px; color: rgba(20,20,20,.55); text-align: center; min-height: 1.2em; }
.wx-tl-group li:hover i { transform: scale(1.2); }
.wx-tl-group li.done i { background: var(--handle); border-color: var(--handle); color: #fff; } .wx-tl-group li.done i::after { content: "✓"; }
.wx-tl-group li.done b { color: var(--ink); }
.wx-tl-group li.back:not(.done):not(.on) i { border: 2.5px dashed var(--handle); } /* done before a rewind: Next walks it again */
.wx-tl-group li.done > button { cursor: pointer; } .wx-tl-group li.done:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wx-tl-group li.done::before { background: var(--handle); }
.wx-tl-group li.on i { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(255,106,43,.3); animation: wx-tl-pulse 1.6s ease-in-out infinite; }
.wx-tl-group li.on b { color: var(--ink); }
@keyframes wx-tl-pulse { 50% { box-shadow: 0 0 0 10px rgba(255,106,43,.1); } }
.wx-next { flex: 0 0 auto; border: 0; background: var(--inv-bg); color: var(--inv-fg); border-radius: 999px; padding: 11px 16px 11px 20px; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--press); transition: transform .12s, background .15s, box-shadow .12s; }
.wx-next i { font-style: normal; transition: transform .2s; }
.wx-next:hover { background: var(--orange); transform: translateY(-1px); } .wx-next:hover i { transform: translateX(3px); }
.wx-next:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,20,40,.35); }
.wx-next[disabled] { opacity: .45; cursor: default; transform: none; }

/* slide-over panel: it sits under the HUD's tab row and above the timeline, so Specs/Parts/Cost/Versions/Files and
   Next stay clickable while it is open (it covered both before) */
.wx-panel { position: fixed; right: calc(12px + clamp(320px, 28vw, 400px) + 12px); top: 140px; bottom: 136px; width: min(360px, 90vw); z-index: 25; background: var(--card-bg); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: wx-panel-in .3s cubic-bezier(.2,1.2,.4,1) both; }
.wx-panel[hidden] { display: none; }
@keyframes wx-panel-in { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 900px) { .wx-panel { right: 10px; left: 10px; width: auto; top: auto; bottom: 10px; max-height: 70svh; } }
.wx-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.wx-panel-head b { font-family: var(--head); font-size: 17px; }
.wx-panel-head button { border: 0; background: transparent; font-size: 22px; line-height: 1; border-radius: 8px; padding: 2px 8px; }
.wx-panel-head button:hover { background: var(--paper-2); }
.wx-panel-body { padding: 14px 16px; overflow-y: auto; display: grid; gap: 12px; font-size: 14px; align-content: start; }
.wx-files { font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace; font-size: 12.5px; display: grid; gap: 8px; }
.wx-files-root { font-weight: 700; font-size: 13px; } .wx-files-root small { font-weight: 500; opacity: .6; margin-left: 6px; }
.wx-files-dir { border-left: 2px solid var(--line); padding-left: 10px; display: grid; gap: 4px; }
.wx-files-dir.locked { opacity: .45; }
.wx-files-dirname { font-weight: 700; } .wx-files-dirname small { font-weight: 500; opacity: .7; margin-left: 6px; }
.wx-file { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0 3px 12px; animation: wx-rise .35s cubic-bezier(.2,.8,.2,1) both; }
.wx-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-file-meta { opacity: .6; font-size: 11.5px; white-space: nowrap; }
.wx-file-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px; background: var(--paper-2); color: var(--ink); text-decoration: none; white-space: nowrap; }
.wx-file-tag.real { background: var(--mint, #8af5dc); }
@keyframes wx-rise { from { opacity: 0; transform: translateY(6px); } }
.wx-panel-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wx-panel-body td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.wx-panel-body td:last-child { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wx-panel-body tr.total td { font-weight: 800; color: var(--ink); border-top: 2px solid var(--ink); }
.wx-panel-body h5 { margin: 6px 0 0; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wx-panel-body .vlist { display: grid; gap: 6px; }
.wx-panel-body .vlist button { display: flex; justify-content: space-between; gap: 8px; border: 0; background: var(--paper-2); border-radius: 10px; padding: 9px 11px; text-align: left; font-weight: 700; font-size: 13px; }
.wx-panel-body .vlist button small { font-family: var(--mono); font-weight: 400; color: var(--muted); font-size: 11px; }
.wx-panel-body .vlist button.cur { background: var(--yellow); }
.wx-panel-body .note { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.wx-panel-body .margin { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wx-panel-body .margin div { background: var(--paper-2); border-radius: 10px; padding: 10px; display: grid; gap: 2px; }
.wx-panel-body .margin b { font-family: var(--head); font-size: 20px; letter-spacing: -.02em; }
.wx-panel-body .margin small { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; }

/* the Builder's duck: a little Open Duck Mini that bobs, blinks and tilts its head, hops while typing */
.wx-duck { background: transparent; width: 46px; height: 46px; margin: -10px -2px -8px -4px; overflow: visible; }
.wx-duck svg { overflow: visible; display: block; }
.wx-duck .d-white { fill: #fff; stroke: #1a1a1f; stroke-width: 1.8; stroke-linejoin: round; }
.wx-duck .d-grey { fill: #9a9ca8; stroke: #1a1a1f; stroke-width: 1.4; }
.wx-duck .d-foot { fill: var(--yellow); stroke: #1a1a1f; stroke-width: 1.6; stroke-linejoin: round; }
.wx-duck .d-ant { stroke: #6b6d78; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.wx-duck .d-ant-tip { fill: var(--orange); }
.wx-duck .d-body { animation: d-bob 2.8s ease-in-out infinite; transform-origin: 32px 62px; }
.wx-duck .d-head { animation: d-tilt 6s ease-in-out infinite; transform-origin: 32px 30px; }
.wx-duck .d-eye { animation: d-blink 4.4s infinite; transform-box: fill-box; transform-origin: center; }
.wx-duck .d-eye2 { animation-delay: .07s; }
.wx-duck:hover .d-head { animation: d-peek .7s ease-in-out; }
.wx-duck.talking .d-body { animation: d-hop .46s ease-in-out infinite; }
.wx-duck.talking .d-head { animation: d-nod .46s ease-in-out infinite; }
@keyframes d-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes d-tilt { 0%, 62%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 78% { transform: rotate(-9deg); } 86% { transform: rotate(5deg); } }
@keyframes d-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes d-peek { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-14deg) translateY(-2px); } }
@keyframes d-hop { 0%, 100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(-5px) scaleY(1.04); } }
@keyframes d-nod { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .wx-body *, .wx-body *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; } .wx-duck * { animation: none !important; } }


.wx-card .cta[href] { text-decoration: none; display: inline-block; }
.wx-card .plan li { justify-content: flex-start; gap: 2px; }
@keyframes wx-rise { to { opacity: 1; transform: none; } } @keyframes wx-spin { to { transform: rotate(360deg); } }

/* the logo on the workbench: the cream-lettered lockup floats gently */
.wx-top .logo { animation: wx-float 3.4s ease-in-out infinite; will-change: transform; }
.wx-top .logo-img { height: 52px; }
@media (max-width: 600px) { .wx-top .logo-img { height: 34px; } }
@keyframes wx-float { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .wx-top .logo { animation: none; } }


/* ---- phones: the view's overlays stack instead of colliding, the timeline stacks over a full-width Next ---- */
@media (max-width: 600px) {
  .wx-hud { left: 14px; right: 14px; top: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .wx-hud-l { gap: 8px; font-size: 11px; flex-wrap: wrap; }
  .wx-dims { display: none; }
  .wx-hud-r { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .wx-hud-r::-webkit-scrollbar { display: none; }
  .wx-ref { left: 14px; top: 84px; }
  .wx-cube { right: 12px; top: 104px; }
  .wx-parts { left: 12px; }
  .wx-tools { bottom: 12px; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
  .wx-tools::-webkit-scrollbar { display: none; }
  .wx-toast { bottom: 76px; max-width: calc(100% - 24px); text-align: center; }
  .wx-timeline { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .wx-tl-groups { gap: 16px; }
  .wx-next { justify-content: center; }
  .wx-chat-head { padding: 10px 12px; }
  .wx-msgs { padding: 12px; }
  .wx-chips { padding: 0 12px 10px; }
  .wx-card .buy { grid-template-columns: 1fr; }
}

/* ---- targets: 36 px with a mouse, 44 px with a finger (and under 900 px, where the phone layout is) ---- */
.wx-tab, .wx-tools button, .wx-chips button, .wx-card .row button, .wx-card .cta, .wx-home, .wx-btn, .wx-name, .wx-menu > * { min-height: 36px; }
.wx-chat-clear, .wx-panel-head button { min-width: 36px; min-height: 36px; }
.wx-tab { padding: 4px 12px; }
.wx-hud-r { padding: 3px; }
/* ---- touch targets: 44 px on anything tapped with a finger (and under 900 px, where the phone layout is) ---- */
@media (pointer: coarse), (max-width: 900px) {
  .wx-btn, .wx-tab, .wx-tools button, .wx-parts button, .wx-chips button, .wx-home, .wx-chat-clear, .wx-next,
  .wx-card .row button, .wx-card .cta, .wx-panel-head button, .wx-menu > *, .wx-seg button, .wx-modes button,
  .wx-panel-body .vlist button, .wx-name, .wx-compose textarea { min-height: 44px; }
  .wx-chat-clear, .wx-panel-head button, .wx-tools button, .wx-more { min-width: 44px; }
  .wx-cube3d { --s: 56px; }
  .wx-tab { padding: 6px 12px; }
  .wx-tools button { padding: 7px 11px; }
  .wx-hud-r { gap: 0; }
  .wx-parts button { padding: 8px 12px; }
  .wx-card .row button, .wx-card .cta { padding: 10px 14px; }
  .wx-chips button { padding: 9px 13px; }
  .wx-measure b { padding: 4px 8px; }
}
/* the 3D view when the model could not load: the message sits where the model would be, never a blank view */
.wx-view-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; max-width: min(320px, 80%); background: var(--card-bg); color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 13px; font-weight: 600; text-align: center; box-shadow: var(--shadow-lg); display: grid; gap: 8px; }
.wx-view-note[hidden] { display: none; }
.wx-view-note small { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); }
.wx-view-note button { border: 0; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 9px 14px; font-weight: 800; font-size: 12px; justify-self: center; min-height: 36px; }

/* ---- the real workbench: the empty view, the view switch, the message modes, forms in cards, the sign-in sheet ---- */
.wx-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px; z-index: 1; pointer-events: none; color: var(--fg-dim); }
.wx-empty[hidden] { display: none; }
.wx-empty b { font-family: var(--head); font-size: clamp(22px, 3vw, 34px); color: var(--ink); letter-spacing: -.01em; }
.wx-empty span { max-width: 380px; font-size: 14px; }
.wx-view.drafting .wx-empty { display: none; }
.wx-concept { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 64px 16px 64px; z-index: 0; }
.wx-concept[hidden] { display: none; }
.wx-view > model-viewer[hidden] { display: none; }
.wx-loading { background: rgba(255,255,255,.3); backdrop-filter: none; pointer-events: none; z-index: 3; }
.wx-loading.over { background: none; align-content: end; padding-bottom: 84px; }
.wx-loading-sub { font-size: 12px; color: var(--fg-dim); max-width: 280px; text-align: center; }
.wx-seg { display: inline-flex; background: rgba(20,20,20,.06); border-radius: 999px; padding: 2px; margin-right: 6px; }
.wx-seg button { border: 0; background: transparent; color: var(--ink); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.wx-seg button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.wx-seg button:disabled { opacity: .35; cursor: default; }
.wx-modes { display: flex; gap: 6px; padding: 0 14px 8px; }
.wx-modes[hidden] { display: none; }
.wx-modes button { border: 1.5px solid var(--line-d2); background: transparent; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12px; }
.wx-modes button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.wx-wait { color: var(--fg-dim); } .wx-secs { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }
.wx-typing { display: inline-flex; }
.wx-v { font-family: var(--mono); font-size: 11px; background: var(--yellow); border-radius: 999px; padding: 1px 7px; margin-right: 4px; }
.wx-used { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); margin: 4px 0 0 6px; }
.wx-card p { margin: 6px 0; font-size: 13px; line-height: 1.45; }
.wx-card .lead { font-size: 14px; }
.wx-card h5 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); }
.wx-card .specs { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0; font-size: 13px; }
.wx-card .specs dt { color: var(--fg-dim); } .wx-card .specs dd { margin: 0; }
.wx-card ul.dots, .wx-card ol.steps { display: block; padding-left: 18px; margin: 0; font-size: 13px; }
.wx-card ul.dots li, .wx-card ol.steps li { display: list-item; padding: 1px 0; background: none; }
.wx-card details { margin: 6px 0; } .wx-card summary { cursor: pointer; font-weight: 800; font-size: 13px; padding: 4px 0; }
.wx-card details pre { max-height: 260px; overflow: auto; font-size: 11px; }
.wx-card .honest { background: #fff6d8; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin: 8px 0; }
.wx-card .note, .wx-panel-body .note { font-size: 12px; color: var(--fg-dim); }
.wx-card a { color: var(--cobalt-deep); }
.wx-card .mini { border: 0; background: var(--paper-2); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 11px; cursor: pointer; min-height: 0; }
.wx-card .mini.ghost { background: transparent; }
.wx-card table.pins, .wx-card table.sum { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wx-card table td { padding: 3px 4px; border-bottom: 1px solid var(--line-d); } .wx-card table td:last-child { text-align: right; font-family: var(--mono); }
.wx-card table.pins td:first-child { font-family: var(--mono); } .wx-card table.pins td:last-child { text-align: left; font-family: inherit; }
.wx-card table tr.total td { font-weight: 800; border-bottom: 0; }
.wx-card .checks li.ok b { color: var(--handle); } .wx-card .checks li.bad b { color: #b3261e; } .wx-card .checks li.na b { color: var(--fg-dim); }
.wx-card .snap { width: 100%; border-radius: 10px; }
.wx-card ol.flow { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.wx-card ol.flow li { display: grid; padding: 3px 0 3px 20px; position: relative; color: var(--fg-dim); background: none; }
.wx-card ol.flow li::before { content: "○"; position: absolute; left: 2px; }
.wx-card ol.flow li.done { color: var(--ink); } .wx-card ol.flow li.done::before { content: "✓"; color: var(--handle); }
.wx-card ol.flow li.now { color: var(--ink); font-weight: 800; } .wx-card ol.flow li.now::before { content: "●"; color: var(--orange); }
.wx-card ol.flow li small { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--fg-dim); }
.wx-form { display: grid; gap: 10px; font-size: 13px; }
.wx-form label { display: grid; gap: 4px; font-weight: 700; }
.wx-form input, .wx-form textarea, .wx-form select { font: inherit; font-weight: 500; border: 1.5px solid var(--line-d2); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); min-width: 0; }
.wx-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; } .wx-form legend { font-weight: 800; margin-bottom: 4px; }
.wx-form label.opt { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; background: var(--bg); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.wx-form label.opt b { display: block; } .wx-form label.opt small { color: var(--fg-dim); }
.wx-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wx-form .two[hidden] { display: none; }
.wx-form .variant { display: grid; grid-template-columns: 1fr 110px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.wx-form .cta { justify-self: start; border: 0; cursor: pointer; }
.wx-card .row .cta { text-decoration: none; }
.wx-tl-group li.run i { background: var(--yellow); animation: wx-tl-pulse 1.2s infinite; }
.wx-tl-group li.err i { background: #ffd9d2; }
.wx-tl-group li > button:disabled { cursor: default; opacity: .7; }
.wx-panel-body .mine { display: grid; gap: 6px; margin-top: 10px; }
.wx-panel-body .mine-row { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 6px; background: var(--bg); }
.wx-panel-body .mine-row.cur { outline: 2px solid var(--cobalt); }
.wx-panel-body .mine-row a { flex: 1; display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.wx-panel-body .mine-row img, .wx-panel-body .mine-row .ph { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--paper-2); flex: none; }
.wx-panel-body .mine-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wx-panel-body .mine-row small { font-size: 11px; color: var(--fg-dim); }
.wx-panel-body .mini { border: 0; background: var(--paper-2); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 12px; min-height: 36px; }
.wx-panel-body .wx-file button.wx-file-tag { border: 0; cursor: pointer; }
.wx-panel-body .wx-card { box-shadow: none; padding: 0; background: transparent; }
.wx-name:disabled { cursor: default; opacity: .8; }

/* the sign-in sheet and toasts of /lib/maker.js, in the workbench's look */
.wx-body .scrim { position: fixed; inset: 0; background: rgba(20,20,40,.45); z-index: 90; }
.wx-body .sheet-dialog { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--cream); color: var(--ink); border-radius: 22px; padding: 26px 22px 20px; box-shadow: 0 30px 80px rgba(20,20,60,.35); }
.wx-body .sheet-dialog .grab { display: none; }
.wx-body .sheet-dialog .close { position: absolute; right: 10px; top: 10px; }
.wx-body .sheet-dialog h2 { font-family: var(--head); font-size: 24px; margin: 0; }
.wx-body .sheet-dialog .stack { display: grid; gap: 12px; }
.wx-body .sheet-dialog form[hidden] { display: none; }
.wx-body .sheet-dialog .muted { color: var(--fg-dim); margin: 0; } .wx-body .sheet-dialog .small { font-size: 13px; margin: 0; } .wx-body .sheet-dialog .tiny { font-size: 11.5px; margin: 0; }
.wx-body .sheet-dialog .seg { display: flex; background: var(--paper-2); border-radius: 999px; padding: 3px; }
.wx-body .sheet-dialog .seg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px; font-weight: 800; color: var(--ink); min-height: 40px; }
.wx-body .sheet-dialog .seg button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wx-body .sheet-dialog .field { display: grid; gap: 4px; } .wx-body .sheet-dialog label { font-weight: 700; font-size: 13px; }
.wx-body .sheet-dialog .input { font: inherit; border: 1.5px solid var(--line-d2); border-radius: 12px; padding: 11px 12px; background: #fff; color: var(--ink); min-height: 44px; }
.wx-body .sheet-dialog .hint { font-size: 12px; color: var(--fg-dim); }
.wx-body .sheet-dialog .btn { border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 800; padding: 12px 18px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wx-body .sheet-dialog .btn.full { width: 100%; } .wx-body .sheet-dialog .btn:hover:not(:disabled) { background: var(--orange); }
.wx-body .sheet-dialog .btn.ghost { background: transparent; color: var(--ink); } .wx-body .sheet-dialog .btn.ghost:hover { background: var(--paper-2); }
.wx-body .sheet-dialog .btn.icon { width: 44px; padding: 0; } .wx-body .sheet-dialog .btn svg { width: 18px; height: 18px; }
.wx-body .sheet-dialog .btn:disabled { opacity: .6; }
.wx-body .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: wx-spin .8s linear infinite; display: inline-block; }
.wx-body > .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 95; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); }
.wx-tools button[hidden], .wx-seg button[hidden] { display: none; }