@font-face{font-family:OGaramond;font-weight:400;src:url(fonts/eb-garamond-latin-400-normal.woff2)}
@font-face{font-family:OGeist;font-weight:400;src:url(fonts/geist-sans-latin-400-normal.woff2)}
@font-face{font-family:OGeist;font-weight:500;src:url(fonts/geist-sans-latin-500-normal.woff2)}
@font-face{font-family:OGeist;font-weight:600;src:url(fonts/geist-sans-latin-600-normal.woff2)}
@font-face{font-family:OMono;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2)}

.ostack{
  --bg:#13161B;--cell:#1C2026;--line:#343944;--line-2:#4A4434;
  --paper:#FAF8F2;--ink-soft:#D8D3C6;--muted:#8D8778;--gold:#D9A441;--claw:#E8524A;--lab:178px;
  --serif:OGaramond,Georgia,serif;--sans:OGeist,system-ui,sans-serif;--mono:OMono,ui-monospace,monospace;
  position:relative;background:var(--bg);color:var(--paper);font-family:var(--sans);
  padding:clamp(18px,3.5vw,44px);overflow:hidden;isolation:isolate
}
.ostack *{box-sizing:border-box;margin:0}
.ostack::before{content:'';position:absolute;inset:0;z-index:-2;background-image:radial-gradient(rgba(250,248,242,.08) 1.2px,transparent 1.3px);background-size:24px 24px}
.ostack .glow{position:absolute;z-index:-1;left:12%;right:12%;top:22%;height:50%;background:radial-gradient(closest-side,rgba(217,164,65,.16),transparent)}
.os-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.os-wrap{position:relative;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:10px}

.os-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-left:2px solid var(--line);padding-left:10px;display:flex;flex-direction:column;justify-content:center;line-height:1.5}
.os-k small{font-size:10px;letter-spacing:.1em;color:#6E6A60;text-transform:none}
.os-k.gold{color:var(--gold);border-color:var(--gold)}
.os-k.claw{color:#F08A84;border-color:var(--claw)}

/* you */
.os-you,.os-claw,.os-infra-row{display:grid;grid-template-columns:var(--lab) 1fr;gap:10px;align-items:stretch}
.os-groups{display:flex;gap:16px;flex-wrap:wrap}
.os-grp{display:flex;flex-direction:column;gap:5px;flex:4 1 0;min-width:0}
.os-grp:nth-child(2){flex:2 1 0}.os-grp:nth-child(3){flex:1 1 0}
.os-gl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.os-cells{display:flex;gap:6px;flex-wrap:wrap}
.os-c{flex:1 1 100px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px;border:1px solid var(--line);background:var(--cell);color:var(--paper);font-size:15px;font-weight:500;white-space:nowrap;transition:box-shadow .2s,border-color .2s}
.os-c img{width:18px;height:18px;object-fit:contain}
.os-c.hit{border-color:var(--gold);box-shadow:0 0 16px rgba(217,164,65,.4)}
.inv{filter:invert(1)}
.os-route{height:44px}

/* orchestra block: agents (columns) x capabilities (rails) */
.os-org{border:1.5px solid var(--gold);background:linear-gradient(180deg,rgba(217,164,65,.13),rgba(217,164,65,.03));padding:10px 12px 12px}
.os-orghead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.os-orghead .n{font-family:var(--serif);font-size:24px}
.os-orghead .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.os-count{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.os-count b{display:inline-block;min-width:2ch;text-align:right;color:var(--gold);font-weight:400;font-size:16px}
.os-grid{display:grid;grid-template-columns:calc(var(--lab) - 12px) repeat(var(--n),1fr);column-gap:10px;row-gap:6px}

.os-agent{position:relative;border:1px solid var(--line-2);background:rgba(19,22,27,.9);padding:9px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:box-shadow .2s,border-color .2s;z-index:4}
.os-agent .pt{position:relative;width:44px;height:44px}
.os-agent .pt img{width:100%;height:100%}
.os-agent .lk{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;background:var(--bg);border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.os-agent .lk svg{width:9px;height:9px}
.os-agent .nm{font-size:14px;font-weight:600;white-space:nowrap}
.os-agent .md{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--line);padding:3px 7px;background:var(--cell);transition:border-color .2s,box-shadow .2s}
.os-agent .md img{width:13px;height:13px}
.os-agent.hit{border-color:var(--gold);box-shadow:0 0 18px rgba(217,164,65,.4)}
.os-agent.hit .md{border-color:var(--gold);box-shadow:0 0 10px rgba(217,164,65,.5)}
.os-agent.hire{border-style:dashed;border-color:var(--muted);background:transparent;justify-content:center;color:var(--muted)}
.os-agent.hire .plus{width:44px;height:44px;border:1px dashed var(--muted);display:grid;place-items:center;font-size:22px}
.os-agent.hire .nm{color:var(--ink-soft);font-weight:500}
.os-agent.hire .md{border-style:dashed;background:transparent;color:var(--muted)}

.os-alab{display:flex;flex-direction:column;justify-content:center}
.os-rail-l{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:34px;padding-left:10px;border-left:2px solid var(--line-2)}
.os-rail-l b{font-weight:500;font-size:14px;color:var(--paper)}
.os-rail-l small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.os-rail-l .logos{display:flex;gap:5px;margin-top:2px}
.os-rail-l .logos img{width:13px;height:13px;object-fit:contain}
.os-rail{grid-column:2/-1;position:relative;min-height:34px;border:1px solid #3A3A33;background:rgba(19,22,27,.55);transition:background .2s,border-color .2s}
.os-rail.gate{border-color:rgba(217,164,65,.6)}
.os-rail.gate + .x{display:none}
.os-rail.flash{background:rgba(217,164,65,.14)}
.os-rail.gate.flash{background:rgba(217,164,65,.28);border-color:var(--gold)}
.os-rail-l.gate{border-color:var(--gold)}
.os-rail-l.gate b{color:var(--gold)}

/* runtime + infra */
.os-clawband{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1.5px solid var(--claw);background:linear-gradient(90deg,rgba(232,82,74,.16),rgba(232,82,74,.04));padding:9px 14px}
.os-clawband img{width:28px;height:28px}
.os-clawband .n{font-weight:600;font-size:17px}
.os-clawband .t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#F08A84}
.os-clawband .parts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.os-clawband .parts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid rgba(232,82,74,.45);padding:3px 8px}
.os-infra{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;border:1.5px solid #5A6070;background:repeating-linear-gradient(135deg,#1A1E24 0 10px,#1D2128 10px 20px);padding:11px;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.os-infra svg{width:16px;height:16px;color:var(--gold)}
.os-infra .d,.os-infra .svc{color:var(--muted)}


.ostack.pre [data-i]{opacity:0;transform:translateY(14px)}
.ostack [data-i]{transition:opacity .5s ease,transform .5s ease}

@media (max-width:820px){
  .ostack{--lab:0px}
  .os-you,.os-claw,.os-infra-row{grid-template-columns:1fr;gap:6px}
  .os-k{border-left:0;padding-left:0}
  .os-grid{grid-template-columns:repeat(3,1fr);column-gap:6px}
  .os-grp{flex:1 1 100%!important}
  .os-groups{gap:8px}
  .os-alab{display:none}
  .os-rail-l{grid-column:1/-1;min-height:0;padding:6px 0 0;border-left:0;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px}
  .os-rail{grid-column:1/-1;min-height:22px}
  .os-agent .nm{font-size:11.5px;white-space:normal}
  .os-agent .md span{display:none}
  .os-agent .pt{width:34px;height:34px}
  .os-agent.extra{display:none}
  .os-c{flex-basis:84px;font-size:13px}
  .os-orghead{flex-wrap:wrap}
}

/* v4: touchpoints, tools layer, runs-on */
.os-rail.tall{min-height:44px}
.os-rail.tools{min-height:62px;border-color:rgba(217,164,65,.35);background:rgba(217,164,65,.06)}
.os-tl{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around;padding:0 10px 5px;pointer-events:none}
.os-tl i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(217,164,65,.55)}
.os-pop{position:absolute;z-index:6;transform:translate(10px,-50%) scale(.9);opacity:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:#13161B;color:var(--gold);border:1px solid var(--gold);padding:2px 6px;white-space:nowrap;pointer-events:none;transition:opacity .2s,transform .2s}
.os-pop.on{opacity:1;transform:translate(10px,-50%) scale(1)}
.os-infra{flex-direction:column;gap:9px}
.os-infra .ln{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px}
.os-on{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.os-on .lb{color:var(--muted);margin-right:4px}
.os-on span.c{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--cell);padding:4px 9px;color:var(--paper);letter-spacing:.06em;font-size:11.5px}
.os-on span.c img{width:13px;height:13px}
.os-on span.c.cur{border-color:var(--gold)}

/* v5: ACL band + projects */
.os-acl{position:relative;display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;border:1.5px solid #7FA88A;background:linear-gradient(90deg,rgba(127,168,138,.16),rgba(127,168,138,.04));padding:8px 10px;margin-bottom:12px;transition:box-shadow .2s}
.os-acl.flash{box-shadow:0 0 22px rgba(127,168,138,.35)}
.os-acl.deny{box-shadow:0 0 22px rgba(232,82,74,.45);border-color:#E8524A}
.os-acl-k{display:flex;align-items:center;gap:10px;flex:0 0 calc(var(--lab) - 22px);min-width:0}
.os-acl-k svg{width:22px;height:22px;color:#9FC1A8;flex:none}
.os-acl-k b{font-weight:600;font-size:15px;display:block}
.os-acl-k small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#9FC1A8;line-height:1.35}
.os-acl-k > span,.os-acl-k{flex-wrap:wrap}
.os-acl-c{flex:1 1 120px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(127,168,138,.4);background:rgba(19,22,27,.7);padding:5px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.os-acl-c span{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--paper)}
.os-body{display:flex;gap:10px;align-items:stretch}
.os-labels{flex:0 0 calc(var(--lab) - 12px);display:flex;flex-direction:column;gap:6px}
.os-labels > div{display:flex;flex-direction:column;justify-content:center}
.os-projects{flex:1;display:flex;gap:12px;min-width:0}
.os-proj{flex:var(--n) 1 0;min-width:0;border:1px solid rgba(217,164,65,.45);background:rgba(19,22,27,.35);padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.os-ph{display:flex;align-items:center;gap:8px;height:34px;border-bottom:1px solid rgba(217,164,65,.25);margin:0 -8px;padding:0 10px}
.os-ph .pn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.os-ph .pp{margin-left:auto;display:flex}
.os-ph .pp i{font-style:normal;width:20px;height:20px;margin-left:-5px;display:grid;place-items:center;background:#2A2E36;border:1.5px solid #13161B;font-family:var(--mono);font-size:8.5px;color:var(--ink-soft)}
.os-lanes{display:flex;gap:6px;height:104px}
.os-lanes .os-agent{flex:1 1 0;min-width:0}
.os-seg{position:relative;border:1px solid #3A3A33;background:rgba(19,22,27,.55);transition:background .2s,border-color .2s}
.os-seg.integrations{height:50px}.os-seg.approvals{height:34px;border-color:rgba(217,164,65,.6)}.os-seg.tools{height:56px;border-color:rgba(217,164,65,.35);background:rgba(217,164,65,.06)}
.os-seg.flash{background:rgba(217,164,65,.16)}.os-seg.approvals.flash{background:rgba(217,164,65,.3);border-color:var(--gold)}
.os-labels .h-ph{height:34px}.os-labels .h-ag{height:104px}.os-labels .h-in{height:50px}.os-labels .h-ap{height:34px}.os-labels .h-to{height:56px}
.os-pop.deny{color:#F08A84;border-color:#E8524A}
.os-pop.ok{color:#9FC1A8;border-color:#7FA88A}
@media (max-width:820px){
  .os-labels{display:none}
  .os-projects{flex-direction:column}
  .os-acl-k{flex-basis:100%}
  .os-acl-c{flex-basis:46%}
  .os-proj.extra{display:none}
}
.os-labels{padding-top:1px}
.os-labels > div{flex:none;overflow:visible;min-height:0}
.os-labels .os-rail-l small{letter-spacing:.06em;font-size:9.5px}
.os-labels .os-k small{line-height:1.35}

/* v5: the integrations shelf. One row under every project, because every agent can reach every
   integration. Logos sit on light tiles (they are drawn for light grounds); the dotted track above
   them is where agents walk, and the strip below holds what they did. */
.os-shelfrow{display:flex;gap:10px;margin-top:10px}
.os-shelfrow .os-rail-l{flex:0 0 calc(var(--lab) - 12px)}
.os-shelf{position:relative;flex:1;min-width:0;height:66px;border:1px solid #3A3A33;background:rgba(19,22,27,.55)}
.os-ints{position:absolute;left:0;right:104px;top:15px;display:flex;gap:5px;padding:0 8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.os-int{flex:none;width:28px;height:28px;display:grid;place-items:center;background:#A9A498;border:1px solid #A9A498;transition:background .2s,box-shadow .2s,transform .2s,border-color .2s}
.os-int img{width:17px;height:17px;object-fit:contain}
.os-int.hit{background:#F4F1E8;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(217,164,65,.6);transform:translateY(2px)}
.os-more{position:absolute;right:0;top:15px;height:28px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.os-agent.think{border-color:var(--gold);box-shadow:0 0 26px rgba(217,164,65,.6)}
@media (max-width:820px){
  .os-shelfrow{flex-direction:column;gap:6px}
  .os-shelfrow .os-rail-l{flex:none}
  .os-shelf{flex:none;height:100px}
  .os-ints{right:0;flex-wrap:wrap;height:61px}
  .os-more{top:auto;bottom:2px;height:18px}
}

/* the approval gate: both buttons sit on every lane, muted like the integration tiles, and light up
   when the task presses one */
.os-gate{position:absolute;z-index:4;width:22px;height:22px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid;transition:background .18s,color .18s,box-shadow .18s,transform .18s;pointer-events:none}
.os-gate svg{width:13px;height:13px}
.os-gate.ok{background:#22382A;border-color:#3E6B4C;color:#7FB48F}
.os-gate.no{background:#3A2422;border-color:#7A3A35;color:#D98A84}
.os-gate.ok.hit{background:#3E9B5C;border-color:#7FD39A;color:#fff;box-shadow:0 0 0 2px #3E9B5C,0 0 16px rgba(62,155,92,.7);transform:translate(-50%,-50%) translateY(2px)}
.os-gate.no.hit{background:#D9443B;border-color:#F08A84;color:#fff;box-shadow:0 0 0 2px #D9443B,0 0 16px rgba(217,68,59,.7);transform:translate(-50%,-50%) translateY(2px)}