@font-face{font-family:Bricolage;src:url("../fonts/BricolageGrotesque-ExtraBoldCondensed.771da34f2a25.woff2") format('woff2');font-weight:800;font-stretch:75%;font-display:swap}
:root{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--lamp-t);outline-offset:4px}
::selection{background:var(--lamp);color:var(--ink)}
.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:8px 12px;background:var(--panel);color:var(--ink)}.skip:focus{top:12px}


:root{--paper:#F4EEE3;--panel:#FFFDF7;--sunk:#EDE6D9;--ink:#1C1915;--muted:#6B6358;--line:rgba(28,25,21,.11);--lamp:#FF5B1F;--lamp-t:#C2410C;--heat:rgba(255,91,31,.10);--basil:#2F7D4F;--plum:#7A4BD0;--chili:#D7362B;--idle:#9A9186;--glow:rgba(255,91,31,.15);--shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(60,40,20,.35);--display:"Bricolage",var(--sans)}
[data-theme="dark"]{--paper:#16130F;--panel:#201C17;--sunk:#1A1713;--ink:#F4EEE3;--muted:#A79E91;--line:rgba(244,238,227,.10);--lamp-t:#FF8A5B;--heat:rgba(255,91,31,.14);--basil:#4FB37A;--plum:#A88BF0;--chili:#F0645A;--idle:#776E64;--glow:rgba(255,91,31,.20);--shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(0,0,0,.7)}
body{background:var(--paper);color:var(--ink);overflow-x:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--display);font-variation-settings:"opsz" 24;color:var(--ink);text-decoration:none}
.brand img{width:30px;height:30px}
.nav-r{display:flex;align-items:center;gap:22px}.nav-r a{color:var(--ink);text-decoration:none}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--lamp);color:#1C1915!important;font-weight:600;text-decoration:none}
.hero{text-align:center;padding:40px 0 0;position:relative}
.hero:before{content:"";position:absolute;left:50%;top:60px;width:1100px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
h1{position:relative;font:800 136px/.92 var(--display);font-stretch:75%;font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-.012em}
h1 .q{color:var(--lamp)}
/* dashboard */
.dash{position:relative;z-index:2;margin-top:44px;background:var(--panel);border-radius:22px;box-shadow:var(--shadow);text-align:left;overflow:hidden}
.grid{display:grid;grid-template-columns:1fr 330px}
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;align-content:start}
.ag{animation:pop .5s ease-out both;position:relative;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel);overflow:hidden}
.ag.working{background:linear-gradient(180deg,var(--heat),transparent 55%),var(--panel);border-color:color-mix(in srgb,var(--lamp) 28%,var(--line))}
.top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.av{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--sans);color:#fff;flex:none}
.av:after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel);background:var(--c)}
.working .av:before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--lamp);opacity:.45;animation:pulse 1.8s ease-out infinite}
.nm{font:700 20px/1 var(--display);font-stretch:85%;font-variation-settings:"opsz" 48,"wdth" 85}
.el{margin-left:auto;font:500 12px var(--mono);color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c);margin-bottom:6px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.working{--c:var(--lamp-t)}.blocked{--c:var(--chili)}.waiting{--c:var(--plum)}.done{--c:var(--basil)}.idle{--c:var(--idle)}
.working .av:after{background:var(--lamp)}
.key{font:500 12px var(--mono);color:var(--muted);margin-right:6px}
.task{font-weight:600;line-height:1.4;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;white-space:nowrap}
.act span{overflow:hidden;text-overflow:ellipsis}
.blocked .act{color:var(--chili)}
.typing{display:inline-flex;gap:3px;margin-left:auto}.typing b{width:4px;height:4px;border-radius:50%;background:var(--lamp);animation:dot 1.2s infinite}.typing b:nth-child(2){animation-delay:.2s}.typing b:nth-child(3){animation-delay:.4s}
.steam{position:absolute;left:21px;top:-2px;width:22px;height:16px;color:var(--lamp);opacity:.55}
.steam path{animation:rise 2.4s ease-in-out infinite}
.feed{border-left:1px solid var(--line);padding:12px 12px;background:var(--sunk)}
.feed ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.feed li{display:flex;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px;line-height:1.4}
.feed li .av{width:24px;height:24px;font-size:10px}.feed li .av:after{display:none}
.feed li .tx{flex:1;min-width:0}.feed li .tx div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed li .tx .sub{color:var(--muted)}
.feed li time{font:12px var(--mono);color:var(--muted)}
.feed li.fresh{animation-delay:1.4s!important;background:color-mix(in srgb,var(--lamp) 14%,var(--panel));animation:slide .6s ease-out both}
.feed li.fresh time{color:var(--lamp-t);font-weight:700}
.feed li.old{opacity:.6}
/* board underneath */
.board{position:relative;z-index:1;margin:-26px 28px 0;padding:46px 18px 0;background:var(--sunk);border-radius:0 0 22px 22px;border:1px solid var(--line);border-top:0;height:300px;overflow:hidden;text-align:left;
 -webkit-mask:linear-gradient(#000 55%,transparent)}
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.col h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;display:flex;gap:8px}
.col h2 span{color:var(--ink);opacity:.5}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;line-height:1.4;display:flex;gap:10px;align-items:start}
.card .av{width:22px;height:22px;font-size:9px}.card .av:after{display:none}
.card.hot{border-color:color-mix(in srgb,var(--lamp) 45%,var(--line))}
.card.ghost{border:1.5px dashed color-mix(in srgb,var(--basil) 55%,var(--line));background:transparent;height:58px}
.card.moving{position:absolute;z-index:3;width:calc(20% - 22px);transform:rotate(-2.5deg);box-shadow:0 18px 30px -12px rgba(0,0,0,.35);animation:move 2.6s cubic-bezier(.5,0,.2,1) .8s both}
.end{text-align:center;margin:72px 0 88px}
.end .btn{height:52px;padding:0 26px;font-size:17px}
@keyframes pulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes rise{0%{transform:translateY(3px);opacity:.2}50%{opacity:1}100%{transform:translateY(-4px);opacity:.2}}
@keyframes slide{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes move{from{left:var(--x0);top:var(--y0);transform:rotate(0)}30%{transform:rotate(-2.5deg)}to{left:var(--x1);top:var(--y1);transform:rotate(-2.5deg)}}
.still *,.still *:before,.still *:after{animation:none!important}
.still .working .av:before{transform:scale(1.15);opacity:.35}
@media (max-width:600px){
 .wrap{padding:0 16px} nav{height:62px}.nav-r .signin{display:none}.brand{font-size:18px}
 .hero{padding:28px 0 0} h1{font-size:72px;line-height:.9} .hero:before{width:100%}
 .dash{margin-top:28px;border-radius:18px}
.task{min-height:0}
 .grid{grid-template-columns:1fr}.agents{grid-template-columns:1fr;padding:12px;gap:10px}
 .ag:nth-child(n+5){display:none}
 .feed{border-left:0;border-top:1px solid var(--line)}.feed li:nth-child(n+4){display:none}
 .board{margin:-20px 12px 0;padding:36px 12px 0;height:200px}
 .cols{grid-template-columns:repeat(5,1fr);gap:8px}.col h2{font-size:10px;gap:4px}.card{padding:7px 8px;font-size:11px;margin-bottom:6px}.card .av{display:none}.card .ct{display:none}.card .key{color:var(--ink);margin:0}.card div{white-space:nowrap;overflow:hidden;text-overflow:clip}.card.ghost{height:30px}
 .card.moving{display:none}
 .end{margin:64px 0}
}
.lede{position:relative;margin:18px auto 0;max-width:820px;font-size:20px;line-height:1.45;color:var(--muted)}
@media (min-width:1001px){.lede{white-space:nowrap}}
.needs{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,#7A4BD0 7%,var(--panel));overflow:hidden}
.needs .nt{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:8px}
.needs .nt b{min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:#7A4BD0;color:#fff;font-size:12px;display:grid;place-items:center}
.ni{display:flex;align-items:center;gap:8px;min-width:0;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;white-space:nowrap}
.ni .tt{overflow:hidden;text-overflow:ellipsis;flex:1}
.ni .g{width:12px;height:12px;border-radius:50%;flex:none;display:grid;place-items:center}
.ni .g.b{background:#D7362B}.ni .g.b:after{content:"";width:6px;height:2px;background:#fff;border-radius:1px}
.ni .g.w{border:2px solid #7A4BD0;width:12px;height:12px}
.ni .av{width:22px;height:22px;font-size:9px}.ni .av:after{display:none}
.needs .ra{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink);background:var(--panel)}
@media (max-width:600px){.board{margin:-26px 10px 0;padding:42px 8px 0}.cols{gap:4px!important}.col h2{font-size:9px!important;letter-spacing:.02em}.card{padding:6px 5px!important}.card .key{font-size:10px!important;letter-spacing:-.02em}.lede{font-size:16px;margin-top:12px;padding:0 6px}.needs{flex-wrap:wrap;padding:10px 12px}.ni{flex:1 1 100%}.ni:nth-of-type(n+4){display:none}.needs .nt{order:0;flex:1}.needs .ra{order:1}.ni{order:2}}

@media(min-width:601px) and (max-width:1000px){.agents{grid-template-columns:repeat(2,minmax(0,1fr))}.needs{flex-wrap:wrap}.needs .nt{flex:1}.needs .ra{order:1}.ni{order:2;flex-basis:40%}.ni:nth-of-type(4){display:none}}
@media(min-width:601px) and (max-width:800px){.grid{grid-template-columns:1fr}.feed{border-left:0;border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.needs .ra{text-decoration:none}

.brand picture{display:flex}