/* The landing: a two-column hero with the comb stage, the three points, and a closing call. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding-block: 40px 72px; }
.copy { display: grid; gap: 20px; align-content: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); margin-top: 72px; }
.three > div { padding: 32px 28px 8px 0; min-width: 0; }
.three > div + div { padding-left: 28px; border-left: 1px solid var(--border); }
.three h3 { font-size: 20px; letter-spacing: -.015em; margin-top: 14px; }
.three p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 12px/1 var(--sans); padding: 5px 9px; border-radius: 999px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.chip.pro { color: var(--brand); }
section.block { margin-top: 104px; }
h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; line-height: 1.08; }
.sub { color: var(--muted); font-size: 17px; margin-top: 14px; max-width: 58ch; }
.end { text-align: center; display: grid; justify-items: center; gap: 18px; }
.end .ctas { justify-content: center; }

.stage { position: relative; min-width: 0; }
.mood { position: absolute; left: 6%; top: 4%; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
/* The fade is screen-aligned, so the tilted plane dissolves into the page instead of showing its edge. */
.view { position: relative; aspect-ratio: 1 / .82; max-width: 100%; overflow: hidden; perspective: 700px; perspective-origin: 50% 20%;
  -webkit-mask-image: radial-gradient(farthest-side at 50% 52%, #000 55%, transparent 100%);
          mask-image: radial-gradient(farthest-side at 50% 52%, #000 55%, transparent 100%); }
/* The plane: a floor seen from above and behind. Its +x runs from the near left into the far right,
   and .fly slides the comb back along it, so cells rise out of the distance and grow as they pass. Two copies, one period apart: seamless. */
.tilt { position: absolute; left: 50%; top: 42%; width: 230%; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-34deg); }
.comb .fly { animation: fly 48s linear infinite; }
@keyframes fly { from { transform: translateX(1496.49px) } to { transform: translateX(0) } }
.tilt svg { width: 100%; height: auto; display: block; }

.comb .lat use { fill: none; stroke: var(--brand); stroke-opacity: .07; stroke-width: 1; }
.comb .c0 { stop-color: var(--creep); stop-opacity: 1; } .comb .c1 { stop-color: var(--creep); stop-opacity: 0; }
.comb .creep { fill: url(#creepgrad); }
.comb .patch { font: 600 14px var(--mono); letter-spacing: .04em; fill: var(--muted); text-anchor: middle; }
.comb .name { font: 500 15px var(--sans); fill: var(--ink); text-anchor: middle; }
.comb .depth { fill: var(--depth); stroke: var(--border); stroke-width: 1; }
.comb .base { fill: var(--panel-2); }
.comb .edge { fill: none; stroke-width: 1.8; }
.comb .morphing .edge { stroke: var(--green); }
.comb .halo { fill: none; stroke: var(--green); stroke-width: 9; stroke-opacity: .1; animation: halo 3.1s ease-in-out infinite; animation-delay: var(--ph); }
@keyframes halo { 50% { stroke-opacity: .3 } }
.comb .wave { fill: var(--green); fill-opacity: .55; animation: wave 2.1s linear infinite; animation-delay: var(--ph); }
@keyframes wave { to { transform: translateX(-43.98px) } }
.comb .summons .edge { stroke: var(--brand-fill); }
.comb .summons .fill { fill: var(--brand-fill); animation: summon 1.26s ease-in-out infinite; }
@keyframes summon { 0%,100% { fill-opacity: .12 } 50% { fill-opacity: .6 } }
.comb .summons .ripple { fill: none; stroke: var(--brand-fill); stroke-width: 2; transform-origin: 0 0; animation: ripple 1.43s linear infinite; }
@keyframes ripple { from { transform: scale(1); opacity: .6 } to { transform: scale(1.72); opacity: 0 } }
.comb .summons .name { fill: var(--brand); font-weight: 600; }
.comb .burrowed .edge { stroke: var(--subtle); stroke-width: 1.2; stroke-opacity: .7; }
.comb .burrowed .name { fill: var(--subtle); }
.comb .terminal .edge { stroke: var(--muted); stroke-dasharray: 3 3; }
.comb .terminal .name { fill: var(--muted); }

/* hero inbox: the app's pill and card stack. The pill opens the stack, a cursor answers each card, it folds back. */
.ibx { --T: 28s; position: absolute; right: 0; bottom: -10%; z-index: 2; width: min(300px, 74%); height: 238px; pointer-events: none; }
.ibx .cards { position: absolute; left: 0; right: 0; bottom: 44px; height: 160px; }
.ibx .nc { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px 14px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); transform-origin: 50% 0;
  transform: translateY(calc(var(--k) * -12px)) scale(calc(1 - var(--k) * .05)); opacity: calc(1 - var(--k) * .4);
  animation: none var(--T) linear infinite; }
.ibx .who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ibx .who b { color: var(--ink); font-weight: 600; }
.ibx .who .now { margin-left: auto; color: var(--brand); }
.ibx .dot.r { background: var(--red); }
.ibx .cap { margin-top: 3px; font-size: 11.5px; color: var(--subtle); }
.ibx h4 { margin: 7px 0 3px; font-size: 15px; line-height: 1.3; }
.ibx h4 code { margin-left: 4px; font: 500 12px var(--mono); background: var(--term); border: 1px solid var(--border-soft); border-radius: 6px; padding: 2px 7px; color: var(--muted); }
.ibx .meta { font-size: 12.5px; color: var(--muted); }
.ibx .acts { margin-top: auto; display: flex; gap: 6px; }
.ibx .btn.deny { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.ibx .ladder { display: flex; width: fit-content; margin-top: 6px; padding: 2px; gap: 2px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 12px; }
.ibx .ladder span { padding: 3px 10px; border-radius: 999px; color: var(--muted); }
.ibx .ladder .o1 { background: var(--active); color: var(--ink); animation: lad1 var(--T) linear infinite; }
.ibx .ladder .o2 { animation: lad2 var(--T) linear infinite; }
.ibx .ladder .o2.p-lad { animation: lad2 var(--T) linear infinite, p-lad var(--T) linear infinite; }
.ibx .hint { display: inline-grid; margin-top: 5px; font-size: 11.5px; color: var(--subtle); }
.ibx .hint span { grid-area: 1 / 1; }
.ibx .hint .h1 { animation: hint1 var(--T) linear infinite; }
.ibx .hint .h2 { opacity: 0; animation: hint2 var(--T) linear infinite; }
.ibx .pill { position: absolute; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--brand-fill) 55%, var(--border)); font-size: 13px; color: var(--muted);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); animation: arrive var(--T) linear infinite; }
.ibx .cnt { display: inline-grid; align-items: center; }
.ibx .cnt b { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 600; white-space: nowrap; opacity: 0; }
.ibx .cnt b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-fill); }
.ibx .cnt .n5 { opacity: 1; }
.ibx .pill i { width: 1px; height: 14px; background: var(--border); }
.ibx .cur { position: absolute; left: 0; bottom: 0; width: 0; height: 0; z-index: 9; opacity: 0; animation: cur var(--T) ease-in-out infinite; }
.ibx .cur svg { position: absolute; left: -2px; top: -1px; width: 18px; height: 22px; transform-origin: 2px 1px; animation: click var(--T) linear infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* the terminal / chat concept: an HTML mock of the app, cycling between the two modes with CSS only */
.app { --cycle: 14s; margin-top: 32px; display: grid; grid-template-columns: 64px 230px minmax(0, 1fr); height: 540px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: 0 40px 120px -40px rgba(0,0,0,.6); font-size: 13px; }
.app svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rail { background: var(--panel-2); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; color: var(--muted); }
.rail .mark { width: 30px; height: 30px; margin-bottom: 10px; }
.rail span { display: grid; justify-items: center; gap: 3px; width: 52px; padding: 7px 0; border-radius: 8px; font-size: 11px; }
.rail span.on { color: var(--ink); background: var(--panel); }
.rail .low { margin-top: auto; }
.projects { border-right: 1px solid var(--border-soft); padding: 14px 10px; display: grid; align-content: start; gap: 6px; min-width: 0; }
.projects .ph { display: flex; align-items: baseline; gap: 5px; padding: 0 4px 6px; font-size: 12px; color: var(--subtle); white-space: nowrap; }
.projects .ph b { font-size: 15px; color: var(--ink); margin-right: 4px; }
.projects .ph .g { color: var(--green); } .projects .ph .a { color: var(--brand); }
.projects .ph em { margin-left: auto; font-style: normal; font-size: 17px; color: var(--muted); }
.projects .all { display: flex; align-items: center; gap: 8px; background: var(--active); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.projects .all svg { width: 16px; height: 16px; color: var(--brand); }
.projects .all i { margin-left: auto; font-style: normal; color: var(--muted); }
.projects .proj { display: flex; align-items: center; gap: 8px; padding: 7px 6px; }
.projects .caret { color: var(--subtle); }
.projects .tag { font-size: 11px; background: var(--chip); color: var(--muted); padding: 2px 7px; border-radius: 999px; }
.projects .proj b { color: var(--brand); font-weight: 600; }
.projects .proj .dot { margin-left: auto; width: 7px; height: 7px; }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.sh { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.sh .back { color: var(--brand); font-size: 20px; line-height: 1; padding-right: 6px; border-right: 1px solid var(--border-soft); }
.sh .hex { color: var(--muted); }
.sh .title { display: grid; min-width: 0; }
.sh .title b { font-weight: 600; font-size: 14px; }
.sh .title span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh .model { display: flex; align-items: center; gap: 6px; color: var(--brand); white-space: nowrap; }
.sh .model .dot { width: 7px; height: 7px; }
.sh .more { color: var(--muted); }
.seg { margin-left: auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); font-size: 12px; }
.seg span { position: relative; z-index: 1; padding: 5px 12px; text-align: center; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--brand-fill); animation: thumb var(--cycle) infinite; }
.seg .lt { animation: lt var(--cycle) infinite; } .seg .lc { animation: lc var(--cycle) infinite; }
@keyframes thumb { 0%, 44% { transform: translateX(0) } 48%, 94% { transform: translateX(100%) } 98%, 100% { transform: translateX(0) } }
@keyframes lt { 0%, 44% { color: var(--on-brand) } 48%, 94% { color: var(--muted) } 98%, 100% { color: var(--on-brand) } }
@keyframes lc { 0%, 44% { color: var(--muted) } 48%, 94% { color: var(--on-brand) } 98%, 100% { color: var(--muted) } }
.body { position: relative; min-height: 0; }
.term, .chat { position: absolute; inset: 0; }
.term { background: var(--term); padding: 22px 26px 14px; display: flex; flex-direction: column; font: 13px/1.6 var(--mono); color: var(--ink); animation: showterm var(--cycle) infinite; }
.chat { display: flex; flex-direction: column; padding: 22px 26px 16px; animation: showchat var(--cycle) infinite; }
@keyframes showterm { 0%, 44% { opacity: 1; transform: none } 48%, 94% { opacity: 0; transform: translateY(6px) } 98%, 100% { opacity: 1; transform: none } }
@keyframes showchat { 0%, 44% { opacity: 0; transform: translateY(6px) } 48%, 94% { opacity: 1; transform: none } 98%, 100% { opacity: 0; transform: translateY(6px) } }
.term pre { margin: 0; font: inherit; white-space: pre-wrap; }
.term b { font-weight: 700; }
.term .b { color: var(--brand); font-weight: 700; } .term .m { color: var(--subtle); } .term .p { color: var(--brand); }
.term .g { color: var(--green); } .term .r { color: var(--red); } .term .v { color: #8fa7f2; }
.term .prompt { margin-top: auto; border-block: 1px solid var(--border); padding: 8px 0; display: flex; gap: 10px; align-items: center; }
.term .cur { width: 8px; height: 16px; background: var(--ink); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.term .status { margin-top: 8px; font-size: 12.5px; }
.chat .msgs { display: grid; gap: 18px; align-content: start; max-width: 640px; width: 100%; margin: 0 auto; font-size: 14.5px; line-height: 1.55; }
.chat .you { justify-self: end; background: var(--chip); border-radius: 14px 14px 4px 14px; padding: 10px 14px; max-width: 80%; }
.chat .bot { display: grid; gap: 8px; }
.chat .tool { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-soft); background: var(--panel); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--muted); }
.chat .tool svg { width: 15px; height: 15px; color: var(--brand); }
.chat .tool b { color: var(--ink); font-weight: 600; }
.chat .tool span { margin-left: auto; }
.chat .tool em { font-style: normal; } .chat .g { color: var(--green); } .chat .r { color: var(--red); }
.chat .bot p { margin-top: 4px; }
.chat .composer { margin: auto auto 0; max-width: 640px; width: 100%; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); background: var(--panel-2); border-radius: 999px; padding: 8px 8px 8px 18px; color: var(--subtle); }
.chat .send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fill); color: var(--on-brand); font-style: normal; font-weight: 700; }
@media (max-width: 900px) { .app { grid-template-columns: 64px minmax(0, 1fr); } .projects { display: none; } }
@media (max-width: 560px) {
  .app { grid-template-columns: minmax(0, 1fr); height: 520px; } .rail { display: none; }
  .sh .model, .sh .more, .sh .hex { display: none; } .term { font-size: 11.5px; padding: 16px; } .chat { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chat { opacity: 0; } }

/* ---------- app screens: Overmind, Work, PRs, Agents (CSS-only loops) ---------- */
.k { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.app.om, .app.w3 { height: 580px; grid-template-rows: minmax(0, 1fr); }
.app > * { min-height: 0; }
.app svg.const { width: 100%; height: auto; stroke: none; stroke-width: 1; }
.app.om { grid-template-columns: 64px minmax(0, 1fr); }
.app.w3 { grid-template-columns: 64px 236px minmax(0, 1fr) 262px; }
.app.ag { grid-template-columns: 64px 250px minmax(0, 1fr); }
.app .hx { width: 16px; height: 16px; color: var(--subtle); stroke-width: 1.7; }
.app .hx.g { color: var(--green); } .app .hx.a { color: var(--brand-fill); } .app .hx.s { color: var(--subtle); }
.app .g { color: var(--green); } .app .a { color: var(--brand); } .app .r { color: var(--red); } .app .m { color: var(--subtle); }
.app em { font-style: normal; }
.swp { display: inline-grid; } .swp > .sw { grid-area: 1 / 1; }
.ty { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }

.app .list { border-right: 1px solid var(--border-soft); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.list .lh { display: flex; align-items: baseline; gap: 8px; padding: 0 6px 10px; white-space: nowrap; }
.list .lh b { font-size: 15px; } .list .lh span { font-size: 12px; color: var(--subtle); } .list .lh em { color: var(--brand); }
.list .lg { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); padding: 12px 6px 6px; }
.list .row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; min-width: 0; }
.list .row.sel { background: var(--active); }
.list .row > div { display: grid; gap: 2px; min-width: 0; }
.list .row b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .row span { font-size: 11.5px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .row .dot { width: 8px; height: 8px; margin-top: 5px; }
.list .ring { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--subtle); margin-top: 5px; flex: none; }
.app .props { border-left: 1px solid var(--border-soft); padding: 16px 14px; overflow: hidden; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.props h5 { margin: 10px 0 2px; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); display: flex; gap: 6px; }
.props h5:first-child { margin-top: 0; }
.props dl { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; margin: 0; }
.props dt { color: var(--subtle); } .props dd { margin: 0; }
.props .lk, .app .lk { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.lk span { display: flex; align-items: center; gap: 6px; min-width: 0; } .lk b { font-weight: 500; color: var(--muted); white-space: nowrap; }
.props .acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.app .pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.app .filt { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }
.app .filt i { font-style: normal; padding: 4px 12px; border-radius: 999px; color: var(--muted); }
.app .filt i.on { background: var(--active); color: var(--ink); }
.flap { font: 600 10px/1 var(--sans); letter-spacing: .06em; padding: 3px 6px; border-radius: 4px; background: var(--chip); color: var(--muted); font-style: normal; display: inline-block; }
.flap.g { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.flap.a { color: var(--brand); background: color-mix(in srgb, var(--brand-fill) 16%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.flap.s { color: var(--subtle); } .flap.b { color: var(--brand); }
@keyframes pulse { 50% { opacity: .55 } }

/* 1 · Overmind */
.om { --c: 18s; }
.om .main { display: flex; flex-direction: column; min-width: 0; }
.omh { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); white-space: nowrap; }
.omh b { font-size: 18px; color: var(--ink); } .omh em { color: var(--brand); }
.omh .filt { margin-left: auto; }
.omh .newb { background: var(--brand-fill); color: var(--on-brand); font-weight: 600; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; }
.tbl { padding: 6px 12px; font-size: 13px; flex: 1; min-height: 0; overflow: hidden; }
.tr { display: grid; grid-template-columns: 22px 120px 100px minmax(0, 1fr) 130px 90px 48px; align-items: center; gap: 0 8px; padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
.tr > span { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tr b { font-weight: 500; }
.tr.th { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); padding-block: 10px; }
.tr.th span:first-child { grid-column: 1 / 3; }
.tr .st.g { color: var(--green); } .tr .st.a { color: var(--brand); }
.plan { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.plan i { width: 44px; height: 4px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.plan i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--green); }
.grp { font: 600 11px/1 var(--sans); letter-spacing: .06em; color: var(--subtle); padding: 12px 8px 6px; display: flex; gap: 4px; }
.grp em { color: var(--brand); }
.om .tr.new { overflow: hidden; animation: om-new var(--c) infinite; }
@keyframes om-new { 0%, 55% { max-height: 0; padding-block: 0; opacity: 0 } 58% { max-height: 40px; padding-block: 6px; opacity: 1; background: color-mix(in srgb, var(--green) 18%, transparent) } 72%, 95% { max-height: 40px; padding-block: 6px; opacity: 1; background: transparent } 99%, 100% { max-height: 0; padding-block: 0; opacity: 0 } }
.om .grp .sw.a1, .om .omh .sw.a1 { animation: om-cnt1 var(--c) infinite; } .om .grp .sw.a2, .om .omh .sw.a2 { animation: om-cnt2 var(--c) infinite; }
@keyframes om-cnt1 { 0%, 55% { opacity: 1 } 56%, 98% { opacity: 0 } }
@keyframes om-cnt2 { 0%, 55% { opacity: 0 } 56%, 98% { opacity: 1 } 100% { opacity: 0 } }
.om .acr .sw.a1 { animation: om-acr1 var(--c) infinite; } .om .acr .sw.a2 { animation: om-acr2 var(--c) infinite; }
.om .acr .hx { animation: om-acrhx var(--c) infinite; }
@keyframes om-acr1 { 0%, 27% { opacity: 1 } 29%, 97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes om-acr2 { 0%, 27% { opacity: 0 } 29%, 97% { opacity: 1 } 100% { opacity: 0 } }
@keyframes om-acrhx { 0%, 27% { color: var(--subtle) } 29%, 97% { color: var(--green) } 100% { color: var(--subtle) } }
.console { border-top: 1px solid var(--border-soft); background: var(--term); font: 12.5px/1.6 var(--mono); }
.console .tx { padding: 10px 18px 0; min-height: 96px; }
.console .tx p { margin: 0 0 6px; }
.console .p { color: var(--green); }
.console .t1 { animation: om-t1 var(--c) infinite; } .console .t2 { animation: om-t2 var(--c) infinite; }
@keyframes om-t1 { 0%, 26% { opacity: 0 } 27%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
@keyframes om-t2 { 0%, 55% { opacity: 0 } 56%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }
.console .pr { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; }
.console .pr .cur { width: 7px; height: 15px; background: var(--ink); animation: blink 1.1s steps(1) infinite; flex: none; }
.console .c1 { animation: om-c1 var(--c) infinite; } .console .c2 { animation: om-c2 var(--c) infinite; }
@keyframes om-c1 { 0%, 4% { width: 0; animation-timing-function: steps(34, end) } 20%, 26% { width: 34ch } 26.5%, 100% { width: 0 } }
@keyframes om-c2 { 0%, 32% { width: 0; animation-timing-function: steps(41, end) } 50%, 55% { width: 41ch } 55.5%, 100% { width: 0 } }
.console .hint { text-align: center; color: var(--subtle); font-size: 11.5px; padding: 0 18px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 2 · Work */
.wk { --c: 22s; }
.wk .main { position: relative; min-width: 0; }
.wk .vp { position: absolute; inset: 0; overflow: hidden; }
.wk .scroll { padding: 22px 28px 26px; font-size: 14px; color: var(--muted); animation: wk-scroll var(--c) infinite ease-in-out; }
@keyframes wk-scroll { 0%, 12% { transform: translateY(0) } 38%, 92% { transform: translateY(calc(-100% + 578px)) } 100% { transform: translateY(0) } }
.tk-top { display: flex; align-items: center; gap: 10px; }
.tk-top .key { font-size: 12.5px; color: var(--brand); }
.tk-title { font-size: 21px; color: var(--ink); letter-spacing: -.01em; margin: 10px 0 12px; }
.wk h4 { margin: 22px 0 10px; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.wk .segs { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; font-size: 11.5px; font-weight: 400; }
.wk .segs i { font-style: normal; padding: 2px 10px; border-radius: 999px; color: var(--muted); } .wk .segs i.on { background: var(--active); color: var(--ink); }
.wk .ac { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wk .ac li { display: flex; gap: 8px; } .wk .ac li::before { content: "○"; color: var(--subtle); } .wk .ac li.d::before { content: "✓"; color: var(--green); }
.cm { margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; overflow: hidden; }
.cm b { color: var(--ink); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cm b em { color: var(--subtle); font-weight: 400; } .cm > span { color: var(--subtle); font-size: 12px; }
.cm p { grid-column: 1 / -1; font-size: 13.5px; }
.cm.posted { animation: wk-post var(--c) infinite; border-color: color-mix(in srgb, var(--brand-fill) 45%, var(--border)); }
@keyframes wk-post { 0%, 62% { max-height: 0; padding-block: 0; margin-top: 0; opacity: 0 } 66%, 96% { max-height: 120px; padding-block: 10px; margin-top: 10px; opacity: 1 } 99.5%, 100% { max-height: 0; padding-block: 0; margin-top: 0; opacity: 0 } }
.wk .box { margin-top: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 10px 10px 10px 14px; min-height: 48px; font-size: 13.5px; color: var(--ink); }
.wk .box .cur { display: none; }
.wk .box .cm1 { width: auto; flex: 1; min-width: 0; clip-path: inset(0 100% 0 0); animation: wk-type var(--c) infinite; }
@keyframes wk-type { 0%, 42% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(56, end) } 58%, 62% { clip-path: inset(0 0 0 0) } 62.5%, 100% { clip-path: inset(0 100% 0 0) } }
.wk .post { margin-left: auto; background: var(--brand-fill); color: var(--on-brand); font-weight: 600; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; animation: wk-press var(--c) infinite; }
@keyframes wk-press { 0%, 60% { transform: none } 61% { transform: scale(.92); background: var(--brand-fill-hover) } 63%, 100% { transform: none } }
.props .verdict { color: var(--brand); font-size: 12.5px; }
.const { width: 100%; height: auto; overflow: visible; }
.const .ring { fill: none; stroke: var(--border); stroke-dasharray: 2 4; }
.const .epic { font: 600 9.5px var(--sans); letter-spacing: .06em; fill: var(--subtle); text-anchor: middle; }
.const .ln { stroke: var(--border); fill: none; }
.const .ctr { fill: color-mix(in srgb, var(--green) 30%, var(--panel)); stroke: var(--green); stroke-width: 1.5; }
.const .done circle { fill: var(--green); } .const .done path { stroke: var(--on-brand); stroke-width: 1.8; fill: none; }
.const .block circle { fill: var(--panel); stroke: var(--brand-fill); stroke-width: 2; }
.const .block .pulse { animation: pulse 1.4s ease-in-out infinite; }
.const .todo { fill: var(--panel); stroke: var(--subtle); stroke-width: 1.5; }
.const .bead { fill: var(--muted); }
.const .prb { fill: var(--panel); stroke: var(--brand); }
.const .lbl { font: 500 10px var(--sans); fill: var(--muted); text-anchor: middle; }
.const .lbl.a { fill: var(--brand); } .const .lbl.ink { fill: var(--ink); }

/* 3 · Pull requests */
.pr { --c: 20s; }
.pr .main { display: flex; flex-direction: column; min-width: 0; }
.prh { padding: 16px 22px 10px; font-size: 12.5px; }
.prh h3 { font-size: 19px; margin: 8px 0 6px; letter-spacing: -.01em; }
.tabs4 { position: relative; display: grid; grid-template-columns: repeat(4, 112px); margin: 0 22px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.tabs4 span { padding: 9px 0; text-align: center; animation: pr-tab var(--c) infinite; }
.tabs4 span:nth-child(2) { animation-delay: -15s; } .tabs4 span:nth-child(3) { animation-delay: -10s; } .tabs4 span:nth-child(4) { animation-delay: -5s; }
@keyframes pr-tab { 0%, 23% { color: var(--ink) } 25%, 98% { color: var(--subtle) } 100% { color: var(--ink) } }
.tabs4 .bar { position: absolute; left: 0; bottom: -1px; width: 112px; height: 2px; background: var(--brand-fill); animation: pr-bar var(--c) infinite; }
@keyframes pr-bar { 0%, 22% { transform: translateX(0) } 25%, 47% { transform: translateX(112px) } 50%, 72% { transform: translateX(224px) } 75%, 97% { transform: translateX(336px) } 100% { transform: translateX(0) } }
.panes { position: relative; flex: 1; min-height: 0; }
.pane { position: absolute; inset: 0; padding: 16px 22px; overflow: hidden; font-size: 13.5px; color: var(--muted); animation: pr-pane var(--c) infinite; }
.pane.p1 { animation-delay: -15s; } .pane.p2 { animation-delay: -10s; } .pane.p3 { animation-delay: -5s; }
@keyframes pr-pane { 0%, 22% { opacity: 1; transform: none } 25%, 97% { opacity: 0; transform: translateY(6px) } 100% { opacity: 1; transform: none } }
.pane h4 { margin: 0 0 6px; color: var(--ink); font-size: 13.5px; } .pane ul { margin: 0 0 14px; padding-left: 18px; }
.desc { padding-bottom: 6px; }
.thr { margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; }
.thr b { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; } .thr > span { color: var(--subtle); font-size: 12px; align-self: center; }
.thr p { grid-column: 1 / -1; } .app code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.files { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; height: 100%; }
.ft p { margin: 0; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; display: flex; gap: 6px; } .ft p em:first-of-type { margin-left: auto; }
.ft p.on { background: var(--active); color: var(--ink); }
.diff { margin: 0; background: var(--term); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 0; font: 12px/1.7 var(--mono); color: var(--muted); overflow: hidden; }
.diff span { display: block; padding: 0 12px; } .diff .hk { color: var(--subtle); }
.diff .add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--ink); }
.diff .del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--ink); }
.pushes { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 12px; }
.pushes .m { margin-right: 6px; }
.pushes i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--green) 70%, transparent); }
.pushes i.x { background: color-mix(in srgb, var(--red) 70%, transparent); }
.pushes i.cur2 { width: 14px; height: 14px; background: transparent; border: 2px solid var(--brand-fill); }
.graph { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 18px 40px; height: 170px; }
.graph .edges { position: absolute; inset: 0; width: 100%; height: 100%; } .graph .edges path { fill: none; stroke: var(--border); stroke-width: .6; vector-effect: non-scaling-stroke; }
.job { position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; align-content: center; font-size: 12.5px; }
.job b { color: var(--ink); font-weight: 500; } .job span { color: var(--subtle); font-size: 12px; }
.job.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); } .job.ok b { color: var(--green); }
.job.run { grid-column: 2; grid-row: 1 / 3; align-self: center; border-color: var(--brand-fill); animation: glowbox 1.6s ease-in-out infinite; } .job.run b { color: var(--brand); }
.job.q { grid-column: 3; grid-row: 1 / 3; align-self: center; border-style: dashed; }
@keyframes glowbox { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-fill) 18%, transparent) } }
.tl { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid var(--border); display: grid; gap: 16px; }
.tl li { position: relative; display: flex; gap: 6px; } .tl li::before { content: ""; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); }
.tl b { color: var(--ink); font-weight: 600; } .tl span { margin-left: auto; color: var(--subtle); font-size: 12px; }

/* 4 · Agents */
.ag { --c: 16s; }
.lanes { position: relative; height: 350px; }
.lane { position: absolute; left: 6px; right: 6px; display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .06em; color: var(--subtle); }
.lane .sq { width: 8px; height: 8px; border-radius: 2px; background: var(--subtle); } .lane .sq.a { background: var(--brand-fill); } .lane .sq.g { background: var(--green); }
.ar { position: absolute; left: 0; right: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 8px; transition: none; }
.ar.sel { background: var(--active); }
.ar .hx { width: 24px; height: 24px; }
.ar > div { display: grid; gap: 1px; min-width: 0; }
.ar b { font-weight: 500; font-size: 13px; } .ar b span { color: var(--subtle); font-weight: 400; font-size: 11.5px; margin-left: 4px; }
.ar p { margin: 0; font-size: 11.5px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar .two { display: grid; } .ar .two .sw { grid-area: 1 / 1; }
.ar.shipper { top: 162px; z-index: 2; animation: ag-ship var(--c) infinite ease-in-out; }
.ar.acr2 { top: 238px; z-index: 1; animation: ag-acr var(--c) infinite ease-in-out; }
@keyframes ag-ship { 0%, 44% { top: 162px } 52%, 92% { top: 238px } 100% { top: 162px } }
@keyframes ag-acr { 0%, 44% { top: 238px } 52%, 92% { top: 162px } 100% { top: 238px } }
.ag .ar .sw.a1 { animation: ag-a1 var(--c) infinite; } .ag .ar .sw.a2 { animation: ag-a2 var(--c) infinite; }
@keyframes ag-a1 { 0%, 46% { opacity: 1 } 48%, 94% { opacity: 0 } 98%, 100% { opacity: 1 } }
@keyframes ag-a2 { 0%, 46% { opacity: 0 } 48%, 94% { opacity: 1 } 98%, 100% { opacity: 0 } }
.ag .ar .hx.flip { animation: ag-hx-on var(--c) infinite; } .ag .ar .hx.flip2 { animation: ag-hx-off var(--c) infinite; }
@keyframes ag-hx-on { 0%, 46% { color: var(--subtle) } 48%, 94% { color: var(--green) } 98%, 100% { color: var(--subtle) } }
@keyframes ag-hx-off { 0%, 46% { color: var(--green) } 48%, 94% { color: var(--subtle) } 98%, 100% { color: var(--green) } }
.ag .main { display: flex; flex-direction: column; min-width: 0; padding: 0 0 14px; }
.agh { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.agh .hx { width: 22px; height: 22px; } .agh > div { display: grid; min-width: 0; } .agh b { font-size: 14px; }
.agh > div span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agh .filt { margin-left: auto; flex: none; } .agh .btn { flex: none; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 0; }
.tiles div { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.tiles span { font: 600 10.5px/1.2 var(--sans); letter-spacing: .06em; color: var(--subtle); } .tiles b { font-weight: 500; font-size: 13px; white-space: nowrap; }
.runs { margin: 10px 18px 0; font-size: 12.5px; }
.rt { display: grid; grid-template-columns: 80px 1fr 60px 60px 60px; padding: 5px 8px; border-radius: 6px; color: var(--muted); }
.rt.th { font: 600 10.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.rt.sel { background: var(--active); color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; padding: 10px 18px 0; flex: 1; min-height: 0; }
.log { background: var(--term); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; font: 12px/1.65 var(--mono); color: var(--muted); overflow: hidden; }
.log p { margin: 0; white-space: pre; animation: ag-line var(--c) infinite backwards; animation-delay: calc(var(--i) * 1.05s); }
.log .oh { font-family: var(--sans); color: var(--subtle); margin-bottom: 4px; animation: none; }
@keyframes ag-line { 0% { opacity: 0; transform: translateY(3px) } 3%, 88% { opacity: 1; transform: none } 92%, 100% { opacity: 0 } }
.ledger { border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; overflow: hidden; display: grid; align-content: start; gap: 8px; font-size: 12px; }
.ledger h5 { margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; color: var(--subtle); }
.le { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; animation: ag-line var(--c) infinite backwards; animation-delay: calc(var(--i) * 2.1s + .4s); }
.le b { font-weight: 600; } .le p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.le .v { justify-self: start; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: var(--chip); color: var(--muted); }
.le .v-ask, .le .v-claim { color: var(--brand); } .le .v-progress, .le .v-done { color: var(--green); }

@media (max-width: 1100px) {
  .app.w3 { grid-template-columns: 64px minmax(0, 1fr) 250px; } .app.w3 .list { display: none; }
  .app.ag { grid-template-columns: 64px 230px minmax(0, 1fr); } .app.ag .list { display: flex; }
  .tr { grid-template-columns: 22px 110px 90px minmax(0, 1fr) 110px; } .tr > span:nth-last-child(-n+2) { display: none; } .tr.th span:nth-last-child(-n+2) { display: none; }
}
@media (max-width: 760px) {
  .app.om, .app.w3, .app.ag { grid-template-columns: minmax(0, 1fr); } .app .rail, .app .props, .app.ag .list { display: none; }
  .tr { grid-template-columns: 22px 90px minmax(0, 1fr) 90px; } .tr > span:nth-child(4), .tr.th span:nth-child(3) { display: none; }
  .omh .filt, .omh .newb { display: none; } .split { grid-template-columns: 1fr; } .ledger { display: none; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .files { grid-template-columns: 1fr; } .ft { display: none; } .graph { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw.a2 { opacity: 0; } .pane:not(.p0) { opacity: 0; } .cm.posted { display: none; }
}

.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; }
.faq details { border-top: 1px solid var(--border); padding-block: 18px; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 64ch; }

/* Small screens last, so they override the rules above. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block: 24px 0; }
  .three { grid-template-columns: 1fr; }
  .three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .faq { grid-template-columns: 1fr; }
  .ibx { position: relative; right: auto; bottom: auto; width: min(300px, 100%); margin: -40px 0 0 auto; }
}