/* The agent studio: one full screen, no page scroll. Idle: the prompt in the middle over the herd. Working: three columns. */
body.app .ft, body.app .ex-bar { display: none }
body.app { overflow: hidden }
.ws { position: relative; height: calc(100svh - var(--hd) - var(--an-h, 0px)); overflow: hidden; display: grid; grid-template-columns: 0 0 1fr; grid-template-rows: 1fr auto }
body.has-an { --an-h: 38px }
.ws-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--e) } .ws-field.on { opacity: 1 }
.ws[data-state=work] .ws-field { opacity: 0 !important; pointer-events: none }
.ws-side, .ws-chat, .ws-board { display: none; min-height: 0 }
/* idle: the prompt, centred */
.ws[data-state=idle] .pb { position: absolute; z-index: 2; left: 50%; top: 42%; width: min(720px, calc(100% - 2 * var(--gut))); translate: -50% -50% }
.pb-hello { text-align: center; margin-bottom: 26px } .st-t { margin: 0; font: 300 clamp(38px, 4.6vw, 68px)/1 var(--f); letter-spacing: -.045em; animation: pgIn .9s var(--e) both }
.ws[data-state=work] .pb-hello, .ws[data-state=work] .pb-sug { display: none }
/* working */
.ws[data-state=work] { grid-template-columns: 232px minmax(340px, 420px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 }
.ws[data-state=work] .ws-side { display: grid; grid-row: 1 / 3; grid-template-rows: auto auto minmax(0, 1fr) auto; border-right: 1px solid var(--line); background: var(--card); overflow: hidden }
.ws[data-state=work] .ws-chat { display: grid; grid-column: 2; grid-row: 1; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; background: var(--char); color: #f2f2ee; position: relative }
.ws[data-state=work] .ws-chat:before { content: ''; position: absolute; inset: 0; background: url(/funds/assets/field/grain.webp) 0 0 / 160px 160px; opacity: .2; mix-blend-mode: screen; pointer-events: none }
.ws[data-state=work] .pb { grid-column: 2; grid-row: 2; min-width: 0; padding: 10px; background: var(--char); position: relative; z-index: 3 }
.ws[data-state=work] .ws-board { display: grid; grid-column: 3; grid-row: 1 / 3; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px 14px; min-width: 0 }

/* sidebar */
.ws-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 8px; font-size: 12px } .ws-sh b { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft) } .ws-sh .mono { font-size: 11px; color: var(--faint) }
.ws-new { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink) } .ws-new:hover { box-shadow: inset 0 0 0 1px var(--ink) } .ws-new svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.ws-agents { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 0; padding: 2px 12px 6px; list-style: none }
.ws-agents button { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: .55; transition: opacity .2s, box-shadow .2s, transform .3s var(--e) }
.ws-agents button span { display: none } .ws-agents img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) }
.ws-agents button:hover { opacity: .9; transform: translateY(-1px) } .ws-agents button[aria-pressed=true] { opacity: 1; box-shadow: 0 0 0 1px var(--red), 0 0 0 3px var(--card) }
.ws-mine, .ws-all { display: grid; align-content: start; gap: 1px; margin: 0; padding: 0 6px 8px; overflow-y: auto; list-style: none }
.mi { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; width: 100%; padding: 8px 46px 8px 8px; border-radius: 3px; text-align: left; transition: background .15s }
.mi:hover { background: var(--paper) } .mi.on { background: var(--paper); box-shadow: inset 2px 0 0 var(--red) }
.mi img { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; filter: grayscale(1); margin-top: 1px }
.mi-t { grid-column: 2; font: 500 13px/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .mi-s { grid-column: 2; font-size: 10.5px; color: var(--soft) }
.ws-mine .mi { grid-template-columns: 1fr } .ws-mine .mi-t, .ws-mine .mi-s { grid-column: 1 }
.mi-r { position: absolute; right: 8px; top: 9px; font-size: 11px }
.mi-e { padding: 8px 10px; font-size: 12.5px; color: var(--faint); list-style: none }

/* chat */
.ws-ch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--char-line) }
.ws-ch b { display: block; font: 500 14.5px/1.2 var(--f) } .ws-ch small { display: block; font-size: 11px; color: #f2f2ee80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ws-log { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; min-width: 0; margin: 0; padding: 16px 14px; overflow-y: auto; list-style: none; overscroll-behavior: contain }
.ws-log .mx .who { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); color: #f2f2ee80 } .ws-log .mx .who .mono { margin-left: auto; font-size: 10.5px; color: #f2f2ee50 }
.ws-log .mx { min-width: 0 } .ws-log .mx p { overflow-wrap: anywhere; margin: 0; font-size: 14.5px; line-height: 1.55; color: #f2f2eee8; white-space: pre-wrap }
.ws-log .mx.me { justify-items: end } .ws-log .mx p.me { max-width: 88%; padding: 9px 12px; border-radius: 4px; background: #ffffff16; color: #fff }
.ws-log .mx p.err { color: #ff9a90 }
.ws-log .tl:empty { display: none }

/* the prompt box (both states) */
.pb { display: grid; gap: 12px }
.pb-box { position: relative; border-radius: 8px; background: var(--char); color: #f2f2ee; box-shadow: 0 40px 80px -40px #0000009c, 0 10px 24px -14px #00000060 }
.pb-box:before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url(/funds/assets/field/grain.webp) 0 0 / 160px 160px; opacity: .2; mix-blend-mode: screen; pointer-events: none }
.pb-box:focus-within { box-shadow: 0 40px 80px -40px #0000009c, 0 0 0 1px #ff2b2b80 }
.ws[data-state=work] .pb-box { border-radius: 6px; background: #1d1d1b; box-shadow: inset 0 0 0 1px var(--char-line) } .ws[data-state=work] .pb-box:focus-within { box-shadow: inset 0 0 0 1px #ff2b2b90 }
.pb-who { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0 }
.pb-live { font-size: 10.5px; letter-spacing: .05em; color: #ff8f86 }
.pb-box textarea { position: relative; display: block; width: 100%; min-height: 56px; max-height: 180px; padding: 12px 16px 4px; border: 0; background: none; resize: none; font: 400 17px/1.5 var(--f); color: #fff; outline: 0 }
.ws[data-state=work] .pb-box textarea { min-height: 44px; font-size: 15px; padding: 8px 12px 2px }
.pb-box textarea::placeholder { color: #f2f2ee55 }
.pb-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 12px }
.pb-sp { flex: 1 }
.pb-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px; border-radius: 3px; background: #ffffff0d; box-shadow: inset 0 0 0 1px var(--char-line); color: #f2f2ee; font: 500 13px/1 var(--f); white-space: nowrap; transition: background .2s }
.pb-chip:hover { background: #ffffff18 } .pb-chip > svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6 } .pb-chip .lg { color: #f2f2ee }
.pb-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; filter: grayscale(1) }
.pb-tier { padding: 3px 5px; border-radius: 2px; background: #ffffff12; font-size: 10px; color: #f2f2eeb0 }
.pb-mic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; color: #f2f2eec0; transition: background .2s, color .2s } .pb-mic:hover { background: #ffffff12; color: #fff }
.pb-mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
.pb-wave { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px } .pb-wave b { width: 2px; height: 6px; background: var(--red); animation: wave .9s ease-in-out infinite } .pb-wave b:nth-child(2) { animation-delay: .1s } .pb-wave b:nth-child(3) { animation-delay: .2s } .pb-wave b:nth-child(4) { animation-delay: .3s } .pb-wave b:nth-child(5) { animation-delay: .4s }
.pb-mic.on svg { opacity: 0 } .pb-mic.on .pb-wave { display: flex } .pb-mic.on { background: #ff2b2b20 }
@keyframes wave { 50% { height: 18px } }
.pb-go { display: grid; place-items: center; width: 44px; height: 40px; border-radius: 3px; background: var(--red); color: #fff; transition: background .2s, transform .25s var(--e) } .pb-go:hover { background: #e50914 } .pb-go:active { transform: scale(.96) } .pb-go:disabled { background: #ffffff1a; color: #f2f2ee66 }
.pb-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.pb-pop { position: absolute; z-index: 10; left: 8px; bottom: calc(100% + 6px); width: min(420px, calc(100% - 16px)); max-height: min(440px, 60vh); overflow-y: auto; padding: 6px; border-radius: 6px; background: #1d1d1b; box-shadow: 0 30px 70px -20px #000000b0, 0 0 0 1px var(--char-line); animation: popIn .32s var(--e) both }
.ws[data-state=idle] .pb-pop { bottom: auto; top: calc(100% + 6px) }
@keyframes popIn { from { opacity: 0; filter: blur(6px); transform: translateY(6px) } }
.pb-ph { margin: 8px 8px 4px; font-size: 10px; letter-spacing: .06em; color: #f2f2ee66 } .pb-pf { margin: 8px; font-size: 10px; color: #f2f2ee55 }
.pb-o { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; width: 100%; padding: 8px 9px; border-radius: 4px; color: #f2f2ee; text-align: left; transition: background .15s }
.pb-o:hover, .pb-o[aria-selected=true] { background: #ffffff10 } .pb-o[aria-selected=true] { box-shadow: inset 2px 0 0 var(--red) }
.pb-o b { display: block; font: 500 13.5px/1.2 var(--f) } .pb-o small { display: block; margin-top: 2px; font-size: 11.5px; color: #f2f2ee80 }
.pb-o img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; filter: grayscale(1) } .pb-lg { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: #ffffff0d }
.pb-pr { font-size: 10.5px; color: #f2f2ee70 }
.pb-sug { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; animation: pgIn .9s var(--e) .15s both }
.pb-sug button { padding: 8px 12px; border-radius: 3px; background: color-mix(in srgb, var(--white) 75%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(6px); font-size: 13.5px; color: var(--ink-2); transition: box-shadow .2s, color .2s }
.pb-sug button:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink) }

/* board */
.ws-bh { display: flex; align-items: end; justify-content: space-between; gap: 16px; min-width: 0 }
.ws-bh h2 { margin: 3px 0 0; font: 300 clamp(22px, 2vw, 32px)/1.1 var(--f); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ws-k { font-size: 10.5px; letter-spacing: .05em; color: var(--red-ink) }
.ws-acts { display: flex; gap: 8px; flex: none }
.ws-cv { position: relative; min-height: 0; overflow: auto; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); background-image: radial-gradient(#1212121c 1px, transparent 1.2px); background-size: 24px 24px }
.ws-board.thinking .ws-cv:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ff2b2b0f 45%, transparent 55%) 0 0 / 220% 100%; animation: think 1.6s linear infinite; pointer-events: none }
@keyframes think { from { background-position: 120% 0 } to { background-position: -120% 0 } }
.ws-scan { position: relative; display: grid; place-items: center; height: 100%; min-height: 260px }
.ws-scan i { position: absolute; inset: 22px; border: 1px solid #ff2b2b55 } .ws-scan i:after { content: ''; position: absolute; left: -12px; right: -12px; top: 0; height: 1px; background: var(--red); animation: scanY 1.3s var(--e) infinite }
@keyframes scanY { to { top: 100% } }
.ws-scan span { font-size: 11px; letter-spacing: .1em; color: var(--red-ink) }
.ws-empty { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 22px }
.ws-tpl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 14px; border-radius: 4px; background: var(--char); color: #f2f2ee; text-align: left; box-shadow: var(--sh-node); transition: transform .35s var(--e), box-shadow .3s; animation: ndIn .6s var(--e) both }
.ws-tpl:nth-child(2) { animation-delay: .05s } .ws-tpl:nth-child(3) { animation-delay: .1s } .ws-tpl:nth-child(4) { animation-delay: .15s } .ws-tpl:nth-child(5) { animation-delay: .2s } .ws-tpl:nth-child(6) { animation-delay: .25s } .ws-tpl:nth-child(7) { animation-delay: .3s }
.ws-tpl:hover { transform: translateY(-3px); box-shadow: var(--sh-node), 0 0 0 1px var(--red) }
.ws-tpl .nd-ic { grid-row: span 2 } .ws-tpl b { font: 500 15px/1.2 var(--f) } .ws-tpl small { font-size: 12.5px; line-height: 1.4; color: #f2f2eea0 }
.ws-bt:empty { display: none }

/* backtest strip */
.bt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 14px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line) }
.bt-k { font-size: 10px; letter-spacing: .06em; color: var(--soft) }
.bt dl { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 } .bt dt { font-size: 11px; color: var(--soft) } .bt dd { margin: 0; font-size: 16px } .bt dd small { font-size: 10.5px; color: var(--faint) }
.bt-bad { padding: 12px 14px; border-radius: 6px; background: var(--red-wash); box-shadow: inset 0 0 0 1px #ff2b2b40 } .bt-bad b { font-weight: 500; color: var(--red-ink) } .bt-bad ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2) }
.spk { display: block; overflow: visible } .spk path { fill: none; stroke: var(--ink); stroke-width: 1.2 } .spk path.b { stroke: #12121233; stroke-dasharray: 2 3 } .spk rect { fill: var(--red) }
.up { color: var(--up) } .down { color: var(--down) }

/* ── shadow nodes */
.nc { position: relative; min-height: 100% }
.nc-w { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1 }
.nc-w .w { fill: none; stroke: var(--red); stroke-width: 1 } .nc-w rect { fill: var(--red) }
.nc-w .pk { fill: var(--red); offset-distance: 0%; animation: pk 2.4s cubic-bezier(.5, 0, .5, 1) infinite }
@keyframes pk { to { offset-distance: 100% } }
.nc-l { position: relative; z-index: 2 }
.nd { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px 14px; border-radius: 5px; background: var(--char); color: #f2f2ee; box-shadow: var(--sh-node); transition: box-shadow .3s; animation: ndIn .7s var(--e) both; animation-delay: calc(var(--i) * 90ms); will-change: transform }
.nd:before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url(/funds/assets/field/grain.webp) 0 0 / 160px 160px; opacity: .22; mix-blend-mode: screen; pointer-events: none }
.nd > * { position: relative }
@keyframes ndIn { from { opacity: 0; translate: -34px 0 } }
.nd.drag { transition: none; z-index: 5; box-shadow: 0 40px 60px -30px #000000b0, 0 0 0 1px var(--red); cursor: grabbing }
.nd.k-guard { background: #24241f } .nd.k-exit { background: #1a1716 }
.nd.k-out { background: var(--ghost); color: var(--ink); box-shadow: 0 24px 44px -28px #00000070, inset 0 0 0 1px var(--line-2) } .nd.k-out .nd-s, .nd.k-out .nd-k { color: var(--soft) } .nd.k-out .nd-ic { background: var(--paper-2); color: var(--ink) }
.nd-h { display: flex; align-items: center; gap: 8px; min-height: 26px; cursor: grab; user-select: none; touch-action: none }
.nd-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: #ffffff10; color: #fff } .nd-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.nd.k-exit .nd-ic { background: #ff2b2b26; color: #ffb3ab }
.nd-k { font-size: 9.5px; letter-spacing: .09em; color: #ff8f86 } .nd-grip { margin-left: auto; width: 14px; height: 14px; opacity: .35 } .nd-grip svg { width: 14px; height: 14px; fill: currentColor; stroke: none } .nd-h:hover .nd-grip { opacity: .8 }
.nd-t { margin-top: 2px; font: 500 15px/1.25 var(--f); letter-spacing: -.01em } .nd-s { font-size: 11px; color: #f2f2ee90 }
.nd-b { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--char-line) }
.nd-p { position: absolute; top: 31px; width: 7px; height: 7px; border: 1px solid var(--red); background: var(--char) } .nd-p.in { left: -4px } .nd-p.out { right: -4px } .nd.k-out .nd-p.out { display: none } .nd:first-child .nd-p.in { display: none }
.nd.scan:after { content: ''; position: absolute; left: -6px; right: -6px; top: 0; height: 1px; background: var(--red); box-shadow: 0 0 0 1px #ff2b2b30; animation: ndScan .5s var(--e) both }
@keyframes ndScan { from { top: 0; opacity: 1 } to { top: 100%; opacity: 0 } }
.tkm { padding: 2px 5px; border-radius: 2px; background: #ffffff14; font-size: 10px; color: #fff }
.nf { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 12px; color: #f2f2eeb0 }
.nf input[type=range] { grid-column: 1 / -1; width: 100%; height: 14px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none }
.nf input[type=range]::-webkit-slider-runnable-track { height: 1px; background: #ffffff30 } .nf input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4.5px; background: var(--red) }
.nf input[type=range]::-moz-range-track { height: 1px; background: #ffffff30 } .nf input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--red) }
.nf b { font-size: 12px; font-weight: 500; color: #fff }
.nsel { width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 3px; background: #ffffff10; color: #fff; font-size: 12.5px } .nsel option { color: #121212 }
.nf-n { margin: 0; font-size: 11px; color: #f2f2ee80 }
.nc.dirty .nd.k-guard { box-shadow: var(--sh-node), 0 0 0 1px #ff2b2b60 }
.nc-cur { position: absolute; z-index: 6; top: 0; left: 0; width: 28px; height: 28px; opacity: 0; pointer-events: none; transition: transform .38s var(--e), opacity .25s; filter: drop-shadow(0 6px 10px #00000050) }
.nc-cur.on { opacity: 1 } .nc-cur img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; filter: grayscale(1); box-shadow: 0 0 0 1px var(--red), 0 0 0 3px var(--paper-2) }
.nc-cur i { position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; border: 1px solid var(--red); animation: curPulse 1s var(--e) infinite } @keyframes curPulse { from { transform: scale(.7); opacity: 1 } to { transform: scale(1.3); opacity: 0 } }
.nc.compact .nd { padding: 8px 10px 9px; box-shadow: 0 12px 20px -14px #00000080 } .nc.compact .nd-t { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .nc.compact .nd-s { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .nc.compact .nd-k { font-size: 8.5px } .nc.compact .nd-p { display: none } .nc.compact .tkm { display: none } .nc.compact .nd-ic { width: 20px; height: 20px } .nc.compact .nd-ic svg { width: 12px; height: 12px } .nc.compact .nd-h { cursor: default; min-height: 20px }

/* inspector */
.ins { position: fixed; z-index: 85; inset: 0; display: grid; place-items: center; padding: 16px; background: #12121266 }
.ins[hidden] { display: none }
.ins-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; width: min(1180px, 100%); height: min(760px, calc(100dvh - 32px)); padding: 20px; border-radius: 8px; background: var(--paper); box-shadow: var(--sh-pop); animation: insIn .5s var(--e) both }
@keyframes insIn { from { opacity: 0; transform: translateX(-28px) } }
.ins-h { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center }
.ins-h h3 { margin: 3px 0 0; font: 300 clamp(24px, 2.2vw, 34px)/1.05 var(--f); letter-spacing: -.035em }
.ins-x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line) } .ins-x:hover { box-shadow: inset 0 0 0 1px var(--ink) } .ins-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.ins-why { margin: 0; max-width: 80ch; font-size: 14.5px; color: var(--ink-2) }
.ins-cv { min-height: 0; overflow: auto; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); background-image: radial-gradient(#1212121c 1px, transparent 1.2px); background-size: 24px 24px }
.ins-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px } .ins-go { display: flex; flex-wrap: wrap; gap: 8px }

@media (max-width: 1100px) { .ws[data-state=work] { grid-template-columns: 0 minmax(300px, 360px) minmax(0, 1fr) } .ws[data-state=work] .ws-side { display: none } }
@media (max-width: 760px) {
  body.app { overflow: auto } .ws { height: auto; min-height: calc(100svh - var(--hd) - var(--an-h, 0px)) }
  .ws[data-state=idle] .pb { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 48px var(--gut) 0 } .ws[data-state=idle] { display: block; padding-bottom: 40vh }
  .ws[data-state=work] { display: flex; flex-direction: column } .ws[data-state=work] .ws-chat { height: 46svh } .ws[data-state=work] .ws-board { min-height: 70svh } .ws[data-state=work] .ws-side { display: none }
  .ws[data-state=work] .pb { position: sticky; bottom: 0 }
}
@media (prefers-reduced-motion: reduce) { .nd, .nc-w .pk, .ws-board.thinking .ws-cv:after, .nc-cur i { animation: none !important } }

/* rail */
.ws-nav { display: grid; gap: 2px; padding: 12px 8px 6px }
.ws-nav button { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; height: 38px; padding: 0 10px; border-radius: 4px; font: 500 14px/1 var(--f); color: var(--ink-2); text-align: left; transition: background .15s, color .15s }
.ws-nav button:hover { background: var(--paper); color: var(--ink) } .ws-nav button[aria-pressed=true] { background: var(--paper-2); color: var(--ink) }
.ws-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round } .ws-nav .mono { font-size: 11px; color: var(--soft) }
.ws-orb { display: flex; align-items: center; gap: 9px; margin: 6px 8px 10px; padding: 10px; border-radius: 4px; font-size: 12.5px; color: var(--soft); transition: background .2s } .ws-orb:hover { background: var(--paper); color: var(--ink) } .ws-orb b { color: var(--ink); font-weight: 500 } .ws-orb img { width: 18px; height: 18px }
.ws-agents { display: none }
.ws-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff12; box-shadow: inset 0 0 0 1px var(--char-line); color: #fff } .ws-av.sm { width: 20px; height: 20px } .ws-av .lg { color: #fff }
.pb-orb { width: 18px; height: 18px; opacity: .8; margin-right: 2px }
.pb-slash { width: 32px; justify-content: center; padding: 0; font: 500 15px/1 var(--mono) }
.pb-pf { display: flex; align-items: center; gap: 7px } .pb-pf img { width: 14px; height: 14px }
.pb-tier { letter-spacing: .05em }
/* slash menu */
.pb-cmds { position: absolute; z-index: 12; left: 8px; right: 8px; bottom: calc(100% + 6px); display: grid; gap: 1px; max-height: min(420px, 56vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 6px; background: #1d1d1b; box-shadow: 0 30px 70px -20px #000000b0, 0 0 0 1px var(--char-line); animation: popIn .25s var(--e) both }
.ws[data-state=idle] .pb-cmds { bottom: auto; top: calc(100% + 6px) }
.pb-cmds[hidden] { display: none }
.pb-cmds li { display: grid; grid-template-columns: 26px 92px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 9px; border-radius: 4px; color: #f2f2ee; cursor: pointer }
.pb-cmds li[aria-selected=true], .pb-cmds li:hover { background: #ffffff10 } .pb-cmds li[aria-selected=true] { box-shadow: inset 2px 0 0 var(--red) }
.pb-cmds .pb-ci { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: #ffffff10 } .pb-cmds .pb-ci svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.pb-cmds b { font-size: 12.5px; font-weight: 500; color: #ff8f86 } .pb-cmds span { font-size: 13.5px } .pb-cmds small { grid-column: 2 / -1; font-size: 11.5px; color: #f2f2ee70 }
.ws-log .mx p b.mono { color: #ff8f86; font-weight: 500 }
/* board title is editable */
.ws-title { min-width: 0 } #cv-t[contenteditable=true] { outline: 0; border-radius: 2px; cursor: text } #cv-t[contenteditable=true]:hover { box-shadow: 0 1px 0 var(--line-2) } #cv-t[contenteditable=true]:focus { box-shadow: 0 1px 0 var(--red) }
.ws-k .down { color: var(--down) }
.ws[data-state=work] .ws-board { grid-template-rows: auto minmax(0, 1fr) }
/* library: replaces the board */
.ws-lib { grid-column: 3; grid-row: 1 / 3; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; min-width: 0; overflow: hidden; background: var(--paper); z-index: 2 }
.ws-lib[hidden] { display: none } .ws[data-state=work][data-view=mine] .ws-board, .ws[data-state=work][data-view=all] .ws-board { display: none }
.ws-lh { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px } .ws-lh h2 { margin: 3px 0 0; font: 300 clamp(24px, 2.2vw, 34px)/1.05 var(--f); letter-spacing: -.035em }
.ws-lf { display: flex; gap: 8px; align-items: center }
.ws-q { height: 36px; width: 200px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); font: 14px var(--f) } .ws-q:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--ink) }
.ws-seg { display: flex; gap: 2px; padding: 3px; border-radius: 4px; background: var(--paper-2) } .ws-seg button { height: 30px; padding: 0 11px; border-radius: 3px; font-size: 13px; color: var(--soft) } .ws-seg button[aria-pressed=true] { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 #12121210 }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; margin: 0; padding: 0 2px 20px; overflow-y: auto; list-style: none }
.wc { position: relative; animation: wcIn .5s var(--e) both; animation-delay: calc(var(--i) * 40ms) }
@keyframes wcIn { from { opacity: 0; filter: blur(8px); transform: translateY(10px) } }
.wc > button[data-id] { display: grid; gap: 7px; width: 100%; height: 100%; padding: 14px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .25s, transform .35s var(--e) }
.wc > button[data-id]:hover { box-shadow: inset 0 0 0 1px var(--ink), 0 22px 40px -28px #00000070; transform: translateY(-2px) }
.wc-h { display: flex; align-items: center; gap: 8px } .wc-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: var(--char); color: #fff } .wc-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round } .wc-ic.lg { width: 44px; height: 44px } .wc-ic.lg svg { width: 20px; height: 20px }
.wc-k { font-size: 10px; letter-spacing: .06em; color: var(--soft) } .wc-st { margin-left: auto; padding: 3px 6px; border-radius: 2px; background: var(--paper-2); font-size: 9.5px; letter-spacing: .06em; color: var(--soft) } .wc-st.running { background: #12804e14; color: var(--up) } .wc-st.review { background: var(--red-wash); color: var(--red-ink) }
.wc-t { font: 500 15.5px/1.25 var(--f); letter-spacing: -.01em } .wc-r { font-size: 11.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wc-cv { height: 66px; border-radius: 4px; background: var(--paper-2); background-image: radial-gradient(#12121216 1px, transparent 1.2px); background-size: 14px 14px; overflow: hidden }
.wc-f { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 2px } .wc-f .mono { font-size: 11px; color: var(--soft) } .wc-f b { font-size: 13.5px; font-weight: 500 }
.wc-x { position: absolute; top: 10px; right: 10px; display: none; width: 24px; height: 24px; border-radius: 3px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; line-height: 1; color: var(--soft) } .wc:hover .wc-x { display: grid; place-items: center } .wc-x:hover { color: var(--down); box-shadow: inset 0 0 0 1px var(--down) }
.wc:hover .wc-st { opacity: 0 }
/* charts in chat */
.vz { margin: 4px 0 2px; padding: 10px 12px 10px; border-radius: 5px; background: #ffffff08; box-shadow: inset 0 0 0 1px var(--char-line); animation: mxIn .5s var(--e) both }
.vz figcaption { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px } .vz figcaption .mono { font-size: 10px; letter-spacing: .06em; color: #f2f2ee70 } .vz figcaption b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.2 var(--f); color: #fff } .vz figcaption .mono:last-child:not(:first-child) { font-size: 12px }
.vz svg { display: block; width: 100%; height: 110px; overflow: visible }
.vz .vz-l { fill: none; stroke: #f2f2ee; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: vzDraw 1.1s var(--e) .1s forwards } .vz .vz-b { stroke: #ffffff30; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke } .vz .vz-c { fill: none; stroke: #ffffff40; vector-effect: non-scaling-stroke }
.vz .vz-l.s1 { stroke: #ff6b5f } .vz .vz-l.s2 { stroke: #9a9a95 } .vz .vz-l.s3 { stroke: #ffffff70 }
.vz .vz-m { fill: none; stroke: var(--red); vector-effect: non-scaling-stroke } .vz .vz-p { fill: var(--red) }
@keyframes vzDraw { to { stroke-dashoffset: 0 } }
.vz dl { display: flex; gap: 20px; margin: 8px 0 0 } .vz dt { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; color: #f2f2ee60 } .vz dd { margin: 3px 0 0; font: 400 13.5px/1 var(--mono); color: #fff }
.vz-k { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none } .vz-k li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: #f2f2eec8 } .vz-k i { width: 10px; height: 2px; background: #f2f2ee } .vz-k i.s1 { background: #ff6b5f } .vz-k i.s2 { background: #9a9a95 } .vz-k b { font-size: 12px; font-weight: 400 } .vz-k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.vz-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none } .vz-bars li { display: grid; grid-template-columns: 34px 1fr 46px; gap: 10px; align-items: center; font-size: 12px; color: #f2f2eec8 } .vz-bars i { height: 6px; background: #ffffff16; position: relative } .vz-bars i:after { content: ''; position: absolute; inset: 0; background: #f2f2ee90; transform-origin: left; transform: scaleX(var(--w)); animation: barIn 1s var(--e) both } .vz-bars li.med i:after { background: var(--red) } .vz-bars b { text-align: right; font-weight: 400 }
@keyframes barIn { from { transform: scaleX(0) } }
.vz .up { color: #6fd6a1 } .vz .down { color: #ff8f86 }
.ins-f .vz { background: var(--char); color: #f2f2ee; min-width: 320px }
.ws-log .mx p code { padding: 1px 5px; border-radius: 2px; background: #ffffff14; font: 12.5px var(--mono) } .ws-log .mx p b { font-weight: 600; color: #fff }

.nc.placed .nd:not(.drag) { transition: transform .5s var(--e), box-shadow .3s }