/* ClankDesk website illustrations.
   Diagrams drawn in HTML/CSS and inline SVG, in the app's own look: graphite cards,
   amber = needs you, sage = done or approved, blue = an agent at work.
   Every figure's resting state is the complete picture, readable without JavaScript.
   illustrations.js adds .il-seen the first time a figure scrolls into view (its entry plays once)
   and toggles .il-on while it is on screen (its explanatory loop runs). Nothing moves under
   prefers-reduced-motion. Shared markup is identical on every page that uses a figure. */

/* ---------- Frame ---------- */
.il{margin:36px 0;min-width:0}
.il-wide{max-width:980px;margin:52px auto 0}
.il-stage{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:22px;overflow:hidden;font-family:var(--f-sans);font-size:13px;line-height:1.4;color:var(--fg);text-align:left;letter-spacing:0}
.il figcaption,.prose .il figcaption{font-size:13.5px;line-height:1.55;color:var(--mute);margin:12px auto 0;max-width:62ch;text-align:center;text-wrap:pretty}
.il b{font-weight:600}
@media (max-width:560px){.il-stage{padding:16px 14px;border-radius:14px}.il{margin:28px 0}}

/* Small labels */
.il-k{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 10px;font-weight:500}
.il-mono{font-family:var(--f-mono);font-size:11px}

/* ---------- App pieces: board, cards, buttons ---------- */
.il-board{background:#111312;border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px}
.il-counts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--mute);padding:1px 2px 9px;border-bottom:1px solid var(--line);margin-bottom:2px}
.il-counts span{display:inline-flex;align-items:center;gap:5px}
.il-counts i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.il-counts i.a{background:var(--amber)}.il-counts i.s{background:var(--sage)}
.il-grp{font-size:11.5px;color:var(--mute);margin:10px 2px 6px}
.il-card{display:grid;grid-template-columns:11px 15px minmax(0,1fr);gap:9px;align-items:start;background:#181b1a;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.il-card > .il-st,.il-card > .il-ag{height:18px;display:grid;place-items:center}
.il-card .t{min-width:0}
.il-card .t > b{display:block;font-size:13px;line-height:1.35}
.il-card .ln{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.il-card.ask{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));background:color-mix(in srgb,var(--amber) 6%,#181b1a)}
.il-card.ask .ln{color:var(--amber)}
.il-card.rev{border-color:color-mix(in srgb,var(--sage) 45%,var(--line))}
.il-card.rev .ln{color:var(--sage)}
.il-card.quiet{background:transparent;border-color:transparent;padding-block:5px}
.il-dot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.il-dot.a{background:var(--amber)}.il-dot.s{background:var(--sage)}.il-dot.r{background:var(--red)}
.il-spin{width:11px;height:11px;border-radius:50%;border:1.6px solid var(--mute);border-right-color:transparent}
.il-ag svg,svg.il-ic{width:14px;height:14px;color:var(--mute);display:block;flex:none}
.il-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.il-btn{border:1px solid var(--line2);background:var(--raise);border-radius:7px;padding:3px 10px;font-size:12px;color:var(--fg);white-space:nowrap;display:inline-block}
.il-btn.main{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}

/* Two panels with an arrow between them (before → after) */
.il-duo{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:14px;align-items:start}
.il-vs{align-self:center;color:var(--dim);font-size:20px;text-align:center;line-height:1}
@media (max-width:640px){.il-duo{grid-template-columns:minmax(0,1fr);gap:12px}.il-vs{transform:rotate(90deg)}}

/* ---------- 1. A dozen tabs vs one board ---------- */
.il-term{background:#0d0f0e;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.il-bar{height:22px;display:flex;gap:6px;align-items:center;padding:0 10px;background:var(--surface)}
.il-bar i{width:8px;height:8px;border-radius:50%;background:#3a3f3c}
.il-tabstrip{display:flex;flex-wrap:wrap;gap:4px;padding:4px 7px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.il-tabstrip span{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);background:#121514;border:1px solid var(--line);border-radius:5px;padding:2px 7px;position:relative}
.il-tabstrip span.cur{color:var(--fg);background:#0d0f0e;border-color:var(--line2)}
.il-tabstrip span.wait::after{content:"";position:absolute;inset:-4px;border:1.5px dashed var(--amber);border-radius:8px}
.il-tty{padding:10px 12px;font-family:var(--f-mono);font-size:11px;line-height:1.65;color:var(--mute);display:grid}
.il-tty span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-tty .d{color:var(--dim)}
.il-note{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--mute)}
.il-note::before{content:"";flex:none;width:14px;height:12px;margin-top:3px;border:1.5px dashed var(--amber);border-radius:5px}
.il-note b{color:var(--fg)}

/* ---------- 2. One ramble becomes three tasks ---------- */
.il-say{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.il-say .il-k{margin:0}
.il-mic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber);flex:none}
.il-mic svg{width:15px;height:15px}
.il-wave{display:inline-flex;gap:2px;align-items:center;height:18px}
.il-wave i{width:2.5px;border-radius:2px;background:var(--amber);height:var(--h,8px)}
.il-quote{font-size:15px;line-height:1.65;color:var(--fg);background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.il-quote mark{background:color-mix(in srgb,var(--blue) 13%,transparent);color:inherit;border-bottom:1.5px solid color-mix(in srgb,var(--blue) 65%,transparent);border-radius:3px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.il-quote mark.later{background:transparent;border-bottom-style:dashed;border-bottom-color:var(--dim)}
.il-n{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:5px;background:var(--blue);color:#0a0b0b;font-family:var(--f-mono);font-size:10.5px;font-weight:500;line-height:1;padding:0 3px;vertical-align:1px;margin-left:3px}
.il-n.later{background:transparent;border:1px dashed var(--mute);color:var(--mute)}
.il-down{display:flex;align-items:center;gap:10px;color:var(--mute);font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin:12px 0}
.il-down::before,.il-down::after{content:"";flex:1;height:1px;background:var(--line2)}
.il-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.il-task{background:#181b1a;border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.il-task .hd{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mute)}
.il-task .hd .il-n{margin:0 2px 0 0}
.il-task > b{font-size:13.5px;line-height:1.3}
.il-task .ln{color:var(--mute);font-size:12px}
.il-task .br{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px dashed var(--line);padding-top:6px;margin-top:auto}
.il-task.later{border-style:dashed;background:transparent}
@media (max-width:640px){.il-three{grid-template-columns:minmax(0,1fr)}.il-quote{font-size:14px}}

/* ---------- 3. A task outlives its sessions ---------- */
.il-taskbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border:1px solid color-mix(in srgb,var(--sage) 40%,var(--line));background:color-mix(in srgb,var(--sage) 5%,#181b1a);border-radius:12px;padding:10px 14px}
.il-taskbar .il-k{margin:0;color:var(--sage)}
.il-taskbar b{font-size:14px}
.il-tags{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
.il-tags span{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:1px 7px}
.il-under{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin:12px 2px 8px}
.il-under::after{content:"";flex:1;border-top:1px dashed var(--line2)}
.il-sess{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;gap:8px 8px}
.il-seg{display:flex;align-items:flex-start;gap:8px;border-radius:9px;padding:8px 10px;background:var(--surface);border:1px solid var(--line2);font-size:12px;min-width:0;transform-origin:0 50%}
.il-seg svg{margin-top:2px}
.il-seg b{display:block;font-size:12.5px}
.il-seg span{display:block;color:var(--mute)}
.il-seg.x{background:color-mix(in srgb,var(--blue) 9%,var(--surface));border-color:color-mix(in srgb,var(--blue) 35%,var(--line2))}
.il-sev{display:flex;gap:7px;font-size:12px;color:var(--mute);padding:0 2px}
.il-sev i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--dim)}
.il-sev.a i{background:var(--amber)}.il-sev.a b{color:var(--amber)}
.il-sev.s i{background:var(--sage)}.il-sev.s b{color:var(--sage)}
.il-sev b{color:var(--fg);font-weight:600}
@media (max-width:640px){
  .il-sess{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:8px 12px;align-items:center}
  .il-sev{padding:0}
}

/* ---------- 4. Two states, and the board derived from them ---------- */
.il-lanes{display:grid;grid-template-columns:100px repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:6px}
.il-lanes > span{display:flex;align-items:center;min-height:38px;padding:5px 8px;border-radius:8px;font-size:12px;min-width:0;overflow-wrap:anywhere}
.il-lanes .key{color:var(--mute);font-size:11.5px;padding-left:0}
.il-lanes .hd{font-weight:600;color:var(--fg);align-items:flex-end;padding-left:2px;min-height:0;padding-bottom:2px}
.il-lanes .hd.gate{color:var(--sage)}
.il-lanes .x,.il-lanes .r{font-family:var(--f-mono);font-size:11px;color:var(--mute);background:var(--surface);border:1px solid var(--line)}
.il-lanes .a{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.il-lanes .s{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 45%,transparent)}
.il-lanes .same{border-style:dashed}
.il-lanes .b{font-weight:600;font-size:11.5px;border:1px solid var(--line2);background:#181b1a}
.il-lanes .b.a{background:color-mix(in srgb,var(--amber) 8%,#181b1a)}
.il-lanes .b.off{background:transparent;border-style:dashed;color:var(--sage);font-weight:500}
.il-lanes .g6{background-color:color-mix(in srgb,var(--sage) 6%,transparent)}
.il-lanes .r.g6,.il-lanes .x.g6{background-color:color-mix(in srgb,var(--sage) 6%,var(--surface))}
.il-legend{display:grid;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.il-legend b{color:var(--fg);font-weight:600}
.il-legend .il-mono{color:var(--mute)}
@media (max-width:640px){
  .il-lanes{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;gap:5px}
  .il-lanes > span{padding:5px 6px;font-size:11px;min-height:34px}
  .il-lanes .x,.il-lanes .r{font-size:10.5px}
  .il-lanes .key{font-size:10.5px;letter-spacing:.02em;align-items:flex-end;min-height:0;color:var(--dim);text-transform:uppercase;font-family:var(--f-mono)}
  .il-lanes .hd{align-items:center;padding-left:0}
}

/* ---------- 5. The attention filter ---------- */
.il-filter{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:14px;align-items:stretch}
.il-col{display:flex;flex-direction:column;min-width:0}
.il-stream{position:relative;flex:1;min-height:250px;max-height:330px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#0d0f0e;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.il-stream-in > div{display:grid;gap:3px;padding:5px 12px}
.il-ev{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 0;min-width:0}
.il-ev svg{width:12px;height:12px;flex:none;color:var(--dim)}
.il-ev span{overflow:hidden;text-overflow:ellipsis}
.il-ev.a{color:var(--amber)}.il-ev.a svg{color:var(--amber)}
.il-ev.s{color:var(--sage)}.il-ev.s svg{color:var(--sage)}
.il-funnel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--dim);font-family:var(--f-mono);font-size:10.5px;text-align:center}
.il-funnel .clank{width:56px}
.il-funnel .arr{font-size:18px;line-height:1;color:var(--mute)}
.il-also{font-size:11.5px;color:var(--mute);margin:2px 2px 0}
@media (max-width:640px){
  .il-filter{grid-template-columns:minmax(0,1fr);gap:10px}
  .il-stream{min-height:0;height:170px;flex:none}
  .il-funnel{flex-direction:row;gap:10px}
  .il-funnel .clank{width:40px}
  .il-funnel .arr{transform:rotate(90deg)}
}

/* ---------- 6. Not an IDE, not a Kanban, not a chat ---------- */
.il-nots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.il-not{display:flex;flex-direction:column;gap:7px;min-width:0}
.il-scr{height:118px;border-radius:10px;background:#111312;border:1px solid var(--line);position:relative;overflow:hidden;padding:8px}
.il-not .nm{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.il-not.x .nm{color:var(--mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 80%,transparent);text-decoration-thickness:2px}
.il-not .why{font-size:12px;color:var(--mute);line-height:1.4}
.il-not.yes .il-scr{border-color:color-mix(in srgb,var(--sage) 50%,var(--line))}
.il-not.yes .why{color:var(--fg)}
.il-scr i{display:block;border-radius:2px;background:var(--line2);height:5px}
/* IDE: file tree + code */
.w-ide{display:grid;grid-template-columns:28% 1fr;gap:8px;height:100%}
.w-ide .tree,.w-ide .code{display:flex;flex-direction:column;gap:6px}
.w-ide .tree{border-right:1px solid var(--line);padding-right:6px}
.w-ide .code i:nth-child(3n+1){background:color-mix(in srgb,var(--blue) 45%,var(--line2))}
.w-ide .code i:nth-child(4n+2){margin-left:12px}
.w-ide .code i:nth-child(5n+3){background:color-mix(in srgb,var(--sage) 40%,var(--line2));margin-left:12px}
/* Kanban: columns of cards and a dragging pointer */
.w-kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;height:100%}
.w-kan > div{background:var(--surface);border-radius:4px;padding:4px 3px;display:flex;flex-direction:column;gap:3px}
.w-kan b{display:block;height:4px;width:60%;border-radius:2px;background:var(--dim);margin-bottom:2px}
.w-kan i{height:12px;border-radius:3px;background:var(--raise);border:1px solid var(--line2)}
.w-kan .drag{position:absolute;left:34%;top:52%;width:22%;height:14px;transform:rotate(-7deg);background:var(--raise);border:1px solid var(--mute);border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.5)}
.w-kan svg{position:absolute;left:49%;top:60%;width:16px;height:16px}
/* Chat: bubbles, the task list scrolled away */
.w-chat{display:flex;flex-direction:column;gap:5px;height:100%;justify-content:flex-end}
.w-chat i{height:14px;border-radius:7px;width:62%}
.w-chat i.me{align-self:flex-end;width:48%;background:color-mix(in srgb,var(--blue) 35%,var(--line2))}
.w-chat i.lst{opacity:.35;width:40%;height:22px;border-radius:4px;border:1px dashed var(--mute);background:transparent}
/* ClankDesk: what needs you on top */
.w-cd{display:flex;flex-direction:column;gap:5px}
.w-cd .q{height:30px;border-radius:5px;border:1px solid color-mix(in srgb,var(--amber) 60%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent);padding:5px 6px;display:flex;flex-direction:column;gap:4px}
.w-cd .q i{background:var(--amber);width:70%;height:4px}
.w-cd .q i + i{width:45%;opacity:.6}
.w-cd .l{display:flex;gap:5px;align-items:center;padding:1px 6px}
.w-cd .l u{flex:none;width:6px;height:6px;border-radius:50%;border:1.3px solid var(--mute);border-right-color:transparent}
.w-cd .l i{flex:1;height:4px}
.w-cd .rv{height:18px;border-radius:5px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);padding:6px;display:flex}
.w-cd .rv i{background:var(--sage);width:55%;height:4px}
@media (max-width:700px){.il-nots{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 7. Visual results, not terminal logs ---------- */
.il-review{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:stretch}
.il-rcard{background:#181b1a;border:1px solid color-mix(in srgb,var(--sage) 45%,var(--line));border-radius:12px;padding:12px 14px}
.il-rcard .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.il-rcard .hd b{font-size:13.5px}
.il-rcard .hd .ln{color:var(--sage);font-size:12px}
.il-rcard .gist{color:var(--mute);font-size:12.5px;margin-top:6px}
.il-rcard .ba{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
.il-rcard .ba figure{margin:0}
.il-rcard .ba figcaption{margin:5px 0 0;text-align:left;font-size:11px;max-width:none}
.il-cap{display:block;font-size:11px;color:var(--mute);margin-top:5px}
.il-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.il-facts span{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:2px 7px}
.il-facts .ok{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 45%,transparent)}
.il-log{border:1px dashed var(--line2);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.il-log .hd{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mute)}
.il-log .lines{flex:1;font-family:var(--f-mono);font-size:10.5px;color:var(--dim);line-height:1.6;max-height:190px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.il-log .lines span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-log .foot{font-size:12px;color:var(--mute)}
@media (max-width:640px){.il-review{grid-template-columns:minmax(0,1fr)}.il-log .lines{max-height:90px}}

/* ---------- 8. A clean board ---------- */
.il-slot{display:grid;margin-bottom:6px}
.il-slot > *{grid-area:1/1;margin:0}
.il-ghost{display:flex;align-items:center;gap:9px;border:1px dashed color-mix(in srgb,var(--sage) 50%,var(--line2));border-radius:10px;padding:8px 12px;color:var(--sage);font-size:12px;margin-bottom:6px}
.il-ghost b{color:var(--sage)}
.il-leave{opacity:0}
.il-strips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;padding-top:10px;border-top:1px dashed var(--line)}
.il-strips > span{font-size:11.5px;color:var(--mute);border:1px dashed var(--line2);border-radius:8px;padding:3px 9px;display:inline-flex;gap:5px;align-items:center}
.il-strips .done{border-style:solid;color:var(--fg)}
.il-swap{display:inline-grid}
.il-swap > *{grid-area:1/1;color:var(--sage)}
.il-swap .il-old{opacity:0}
.il-repo-note{display:grid;gap:6px;margin-top:12px;font-size:12px;color:var(--mute)}
.il-repo-note span{display:flex;gap:8px;align-items:baseline}
.il-repo-note span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sage);transform:translateY(-1px)}

/* ---------- 9. One worktree per task ---------- */
.il-wt{display:grid;grid-template-columns:minmax(0,.75fr) 54px minmax(0,1.7fr);align-items:stretch}
.il-repo{align-self:center;border:1px solid var(--line2);border-radius:12px;background:var(--surface);padding:12px 14px;display:grid;gap:4px}
.il-repo b{font-size:13.5px}
.il-repo span{color:var(--mute);font-size:12px}
.il-repo .il-mono{color:var(--dim)}
.il-fanw{position:relative;min-width:0}
.il-fan{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.il-fan path{fill:none;stroke:var(--line2);stroke-width:1.5}
.il-fan path.you{stroke-dasharray:4 4}
.il-wts{display:grid;grid-template-rows:repeat(4,1fr);gap:8px}
.il-wtr{border:1px solid var(--line);background:#181b1a;border-radius:10px;padding:8px 12px;display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:2px 9px;align-items:center;min-width:0}
.il-wtr > svg{grid-row:1/3}
.il-wtr b{font-size:12.5px;min-width:0}
.il-wtr .p{grid-column:2/4;font-family:var(--f-mono);font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.il-wtr .cm{display:flex;align-items:center;gap:0}
.il-wtr .cm i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.il-wtr .cm i + i{margin-left:9px;position:relative}
.il-wtr .cm i + i::before{content:"";position:absolute;right:7px;top:3px;width:9px;height:1px;background:color-mix(in srgb,var(--blue) 60%,transparent)}
.il-wtr.you{border-style:dashed;background:transparent}
.il-wtr.you .cm i{background:var(--fg)}
.il-wt-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
@media (max-width:640px){
  .il-wt{grid-template-columns:minmax(0,1fr)}
  .il-fanw{display:none}
  .il-wts{grid-template-rows:none;margin:10px 0 0 10px;padding-left:14px;border-left:1.5px solid var(--line2)}
  .il-wtr{position:relative}
  .il-wtr::before{content:"";position:absolute;left:-15px;top:50%;width:14px;height:1.5px;background:var(--line2)}
}

/* ---------- 10. The merge pipeline ---------- */
.il-pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px}
.il-step{position:relative;background:#181b1a;border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0;display:flex;flex-direction:column;gap:4px}
.il-step:not(.end)::after{content:"";position:absolute;right:-10px;top:50%;width:10px;height:1.5px;background:var(--mute)}
.il-step .no{font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.il-step b{font-size:12.5px;line-height:1.25}
.il-step .c{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);line-height:1.35}
.il-step .c .nw{white-space:nowrap}
.il-step.go{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.il-step.go .no,.il-step.go .c{color:#4d524f}
.il-step.end{border-color:color-mix(in srgb,var(--sage) 50%,var(--line))}
.il-step.end b{color:var(--sage)}
.il-back{grid-column:3/5;grid-row:2;border:1.5px dashed color-mix(in srgb,var(--amber) 65%,transparent);border-top:0;border-radius:0 0 14px 14px;margin:-12px 22px 0;padding:16px 10px 9px;font-size:12px;line-height:1.4;color:var(--amber);text-align:center}
.il-back b{color:var(--amber)}
.il-pipe-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--mute);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.il-pipe-foot span{display:flex;gap:8px;align-items:baseline}
.il-pipe-foot span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sage);transform:translateY(-1px)}
@media (max-width:700px){
  .il-pipe{grid-template-columns:minmax(0,1fr);gap:10px}
  .il-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:1px 8px;padding:8px 12px}
  .il-step .no{grid-row:1/3;padding-top:2px}
  .il-step:not(.end)::after{right:auto;left:22px;top:auto;bottom:-10px;width:1.5px;height:10px}
  .il-pipe > .il-step:nth-child(1){order:1}.il-pipe > .il-step:nth-child(2){order:2}.il-pipe > .il-step:nth-child(3){order:3}
  .il-pipe > .il-step:nth-child(4){order:4}.il-back{order:5}.il-pipe > .il-step:nth-child(5){order:6}.il-pipe > .il-step:nth-child(6){order:7}.il-pipe-foot{order:8}
  .il-back{grid-column:auto;grid-row:auto;margin:-10px 0 0 34px;border-top:0;border-right:0;border-radius:0 0 0 12px;text-align:left;padding:10px 4px 6px 12px}
}

/* ---------- 11. Overlapping tasks take turns ---------- */
.il-gantt{display:grid;gap:16px}
.il-row{min-width:0}
.il-row .lbl{display:flex;align-items:center;gap:6px 8px;font-size:12.5px;margin-bottom:6px;flex-wrap:wrap}
.il-row .lbl b{font-size:12.5px}
.il-file{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);border:1px solid var(--line2);border-radius:5px;padding:0 6px}
.il-file.hot{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.il-track{position:relative;height:28px;border-radius:7px;background:#0d0f0e;border:1px solid var(--line)}
.il-sg{position:absolute;top:3px;bottom:3px;border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg);transform-origin:0 50%}
.il-sg.run{background:color-mix(in srgb,var(--blue) 24%,#181b1a);border:1px solid color-mix(in srgb,var(--blue) 45%,transparent)}
.il-sg.wait{background:repeating-linear-gradient(-45deg,transparent 0 5px,color-mix(in srgb,var(--fg) 6%,transparent) 5px 10px);border:1px dashed var(--line2);color:var(--mute)}
.il-mk{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;transform:rotate(45deg);background:var(--sage);border-radius:2px}
.il-mk.rv{border-radius:50%;transform:none;width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.il-row .ann{font-size:11.5px;color:var(--mute);margin-top:5px}
.il-row .ann b{color:var(--fg)}
.il-legend-i{display:inline-flex;align-items:center;gap:4px}
.il-legend-i .il-mk{position:relative;top:auto;margin:0 2px 0 8px;width:9px;height:9px}
.il-legend-i .il-mk.rv{margin-left:10px}
.il-axis{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:6px}

/* ---------- 12. Retries on their own ---------- */
.il-retry{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 14px;align-items:center}
.il-retry > .il-k{margin:0}
.il-rt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.il-rt::before{content:"";position:absolute;left:8.33%;right:8.33%;top:9px;height:1.5px;background:var(--line2)}
.il-rt > span{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:11.5px;min-width:0}
.il-rt i{width:18px;height:18px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--blue);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--blue);margin-bottom:4px}
.il-rt .f i{border-color:var(--red);color:var(--red)}
.il-rt .gap i{border-style:dashed;border-color:var(--dim);color:var(--dim)}
.il-rt .end i{border-color:var(--amber);color:var(--amber)}
.il-rt b{font-size:11.5px}
.il-rt em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--mute)}
.il-see{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:stretch}
.il-see .il-card{margin:0}
.il-see .run{grid-column:1/6;border-style:solid;background:#181b1a}
.il-see .ask{grid-column:6/7;grid-template-columns:minmax(0,1fr)}
.il-see .ask .il-st{display:none}
.il-retry-foot{grid-column:1/-1;font-size:12px;color:var(--mute);border-top:1px solid var(--line);padding-top:12px}
@media (max-width:640px){
  .il-retry{grid-template-columns:minmax(0,1fr);gap:8px}
  .il-retry > .il-k:not(:first-child){margin-top:8px}
  .il-rt > span{font-size:10.5px}.il-rt b{font-size:10.5px}.il-rt em{font-size:9.5px}
  .il-see{grid-template-columns:minmax(0,1fr)}
  .il-see .run,.il-see .ask{grid-column:auto}
}

/* ---------- 13. Risky commands ask, pushing never happens ---------- */
.il-cmd{font-family:var(--f-mono);font-size:12.5px;color:var(--fg);background:#0d0f0e;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.il-cmd .pr{color:var(--dim);margin-right:8px}
.il-parts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.9fr);gap:8px;margin-top:8px}
.il-part{border:1px solid var(--line2);border-radius:9px;padding:7px 10px;display:grid;gap:2px;min-width:0}
.il-part code{font-family:var(--f-mono);font-size:11px;color:var(--fg);overflow-wrap:anywhere;background:none;border:0;padding:0}
.il-part span{font-size:11.5px;color:var(--mute)}
.il-part.ok{border-color:color-mix(in srgb,var(--sage) 45%,transparent)}.il-part.ok span{color:var(--sage)}
.il-part.risk{border-color:color-mix(in srgb,var(--amber) 50%,transparent)}.il-part.risk span{color:var(--amber)}
.il-rule{display:flex;align-items:center;gap:10px;margin:12px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.il-rule::before,.il-rule::after{content:"";flex:1;height:1px;background:var(--line2)}
.il-outs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:10px;align-items:start}
.il-out{border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:grid;gap:6px;min-width:0}
.il-out .h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px}
.il-out .it{font-size:12px;color:var(--mute);line-height:1.5}
.il-out .it code{font-family:var(--f-mono);font-size:11px;color:var(--fg);background:none;border:0;padding:0}
.il-out.run .h{color:var(--sage)}
.il-out.ask{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));background:color-mix(in srgb,var(--amber) 5%,transparent)}
.il-out.ask .h{color:var(--amber)}
.il-out.never .h{color:var(--red)}
.il-out.never .it{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 60%,transparent)}
.il-out .il-card{margin:2px 0 0}
.il-out .il-card .ln{color:var(--mute)}
.il-this{font-family:var(--f-mono);font-size:10px;color:#1a1206;background:var(--amber);border-radius:999px;padding:1px 7px;margin-left:auto;font-weight:500;letter-spacing:.02em}
@media (max-width:700px){.il-parts,.il-outs{grid-template-columns:minmax(0,1fr)}.il-outs > .ask{order:-1}}

/* ---------- 14. Worktrees isolate files, nothing else ---------- */
.il-iso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.il-wtc{border:1px solid var(--line2);border-radius:12px;background:#181b1a;padding:10px 12px;display:grid;gap:5px;min-width:0}
.il-wtc > b{font-family:var(--f-mono);font-size:11.5px;font-weight:500;color:var(--fg);overflow-wrap:anywhere}
.il-wtc .ok{font-size:12px;color:var(--sage);display:flex;gap:6px}
.il-wtc .ok::before{content:"✓"}
.il-wtc .run{margin-top:4px;font-family:var(--f-mono);font-size:10.5px;color:var(--mute);border-top:1px dashed var(--line);padding-top:6px;overflow-wrap:anywhere}
.il-wtc .run.hit{color:var(--red)}
.il-shared{margin-top:12px;border:1px dashed color-mix(in srgb,var(--red) 55%,transparent);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:color-mix(in srgb,var(--red) 4%,transparent)}
.il-shared .il-k{margin:0;color:var(--red)}
.il-res{display:flex;flex-wrap:wrap;gap:6px}
.il-res span{font-size:12px;border:1px solid var(--line2);border-radius:7px;padding:2px 9px;color:var(--mute);background:var(--surface)}
.il-res span.hit{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.il-fix{margin-top:12px;display:grid;gap:5px;font-size:12px;color:var(--mute)}
.il-fix span{display:flex;gap:8px;align-items:baseline}
.il-fix span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sage);transform:translateY(-1px)}
.il-fix code{font-family:var(--f-mono);font-size:11px;color:var(--fg);background:none;border:0;padding:0}
@media (max-width:560px){.il-iso{gap:6px}.il-wtc{padding:8px}.il-wtc .ok{font-size:11px}}

/* ---------- 15. Columns vs an attention board ---------- */
.il-kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:#111312;border:1px solid var(--line);border-radius:12px;padding:8px}
@media (max-width:640px){.il-kan{grid-template-columns:repeat(2,minmax(0,1fr))}}
.il-kan > div{background:var(--surface);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:5px;min-width:0}
.il-kan span{display:block;background:#181b1a;border:1px solid var(--line2);border-radius:6px;padding:4px 5px;font-size:10px;color:var(--mute);line-height:1.3;position:relative;overflow-wrap:break-word}
.il-kan span.h{background:none;border:0;padding:0 2px;font-family:var(--f-mono);font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.il-kanban .il-duo{grid-template-columns:minmax(0,1.15fr) 26px minmax(0,1fr)}
@media (max-width:640px){.il-kanban .il-duo{grid-template-columns:minmax(0,1fr)}}
.il-kan span.wait::after{content:"";position:absolute;inset:-4px;border:1.5px dashed var(--amber);border-radius:9px}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Before a figure is first seen, its entering parts wait out of sight (only when JS runs) */
  .il-js .il:not(.il-seen) .il-pop,
  .il-js .il:not(.il-seen) .il-grow{opacity:0}

  .il-seen .il-pop{animation:ilPop .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 140ms + 120ms)}
  .il-seen .il-grow{animation:ilGrow .7s cubic-bezier(.5,0,.2,1) both;animation-delay:calc(var(--i,0) * 140ms + 120ms)}
  @keyframes ilPop{from{opacity:0;transform:translateY(8px) scale(.97)}}
  @keyframes ilGrow{from{opacity:.2;transform:scaleX(0)}}

  /* Loops run only while the figure is on screen */
  .il .il-spin,.il .w-cd .l u{animation:ilSpin .9s linear infinite}
  .il:not(.il-on) *{animation-play-state:paused!important}
  .il-seen.il-on .il-pop,.il-seen.il-on .il-grow{animation-play-state:running!important}
  @keyframes ilSpin{to{transform:rotate(360deg)}}

  /* Tabs: the waiting tab's ring breathes; nobody would notice it in a real terminal */
  .il-on .il-tabstrip .wait::after{animation:ilRing 2.4s ease-in-out infinite}
  @keyframes ilRing{50%{opacity:.25}}

  /* Speech: the waveform moves, then each phrase lights up in turn */
  .il-on .il-wave i{animation:ilWave 1s ease-in-out infinite;animation-delay:calc(var(--d,0) * 120ms)}
  @keyframes ilWave{50%{transform:scaleY(.35)}}
  .il-seen .il-quote mark{animation:ilMark 1s ease both;animation-delay:calc(var(--i,0) * 450ms + 300ms)}
  @keyframes ilMark{from{background-color:transparent;border-bottom-color:transparent}}

  /* Two states: a highlight walks through the six moments */
  .il-on .il-lanes .m{animation:ilCol 9s infinite}
  .il-lanes .m1{animation-delay:0s!important}.il-lanes .m2{animation-delay:1.5s!important}.il-lanes .m3{animation-delay:3s!important}
  .il-lanes .m4{animation-delay:4.5s!important}.il-lanes .m5{animation-delay:6s!important}.il-lanes .m6{animation-delay:7.5s!important}
  @keyframes ilCol{0%,15%{box-shadow:0 0 0 1.5px var(--fg);transform:translateY(-1px)}17%,100%{box-shadow:0 0 0 0 transparent;transform:none}}

  /* Attention filter: the agents' events scroll by */
  .il-on .il-stream-in{animation:ilScroll 26s linear infinite}
  @keyframes ilScroll{to{transform:translateY(-50%)}}
  .il-on .il-funnel .arr{animation:ilNudge 1.6s ease-in-out infinite}
  @keyframes ilNudge{50%{translate:4px 0}}

  /* Clean board: Approve, the card slides off, Done counts it */
  .il-seen .il-leave{animation:ilLeave 2.8s .5s both}
  .il-seen .il-leave .il-btn.main{animation:ilPress 2.8s .5s both}
  .il-seen .il-ghost{animation:ilPop .5s 3.1s both}
  .il-seen .il-swap .il-old{animation:ilOut .3s 3.2s both}
  .il-seen .il-swap .il-new{animation:ilIn .4s 3.4s both}
  @keyframes ilLeave{0%,58%{opacity:1;transform:none}100%{opacity:0;transform:translateX(65%)}}
  @keyframes ilPress{38%{transform:none;background:var(--fg);border-color:var(--fg)}46%,58%{transform:scale(.92);background:var(--amber);border-color:var(--amber)}}
  @keyframes ilOut{from{opacity:1}to{opacity:0}}
  @keyframes ilIn{from{opacity:0;transform:scale(1.6)}}

  /* Worktrees: the branches draw out to their folders */
  .il-seen .il-fan path{stroke-dasharray:1;stroke-dashoffset:0;animation:ilDraw .7s ease both;animation-delay:calc(var(--i,0) * 160ms + 100ms)}
  .il-seen .il-fan path.you{stroke-dasharray:none}
  @keyframes ilDraw{from{stroke-dashoffset:1}}

  /* Merge pipeline: one step after another */
  .il-on .il-pipe .il-step{animation:ilStep 7.2s infinite;animation-delay:calc(var(--i,0) * 1.2s)}
  @keyframes ilStep{0%,14%{box-shadow:0 0 0 1.5px var(--sage);transform:translateY(-2px)}17%,100%{box-shadow:0 0 0 0 transparent;transform:none}}

  /* Retries: dots appear along the line */
  .il-seen .il-rt > span{animation:ilPop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 260ms + 150ms)}
}