/* OPSIN concept 4: the living substrate, use-case paths, unlocks */

/* ---------- the substrate: a lattice of agents behind the whole page ---------- */
body { position: relative; }
.lattice { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 7px 7px, rgba(14, 19, 22, .1) 0 1.05px, transparent 1.6px);
  background-size: 14px 14px; }
.substrate { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
main, .foot { position: relative; z-index: 1; }
.hero::before { display: none; }
.hero-vis::before { content: ""; position: absolute; inset: -6% -4% -6% 4%; pointer-events: none;
  background: radial-gradient(closest-side, var(--paper) 58%, rgba(246, 246, 242, 0) 100%); }
.sec-white { background: rgba(255, 255, 255, .62); }
.foot { background: rgba(246, 246, 242, .7); }

/* the background, counted in the nav */
.pulse { display: none; align-items: center; gap: 5px; font: 400 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--dim); white-space: nowrap; }
.pulse i { width: 6px; height: 6px; border-radius: 50%; background: var(--chain); box-shadow: 0 0 0 3px rgba(19, 138, 125, .14); margin-right: 3px; animation: blink 1.6s steps(2, jump-none) infinite; }
.pulse b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pulse .sep { color: var(--faint); margin: 0 3px; }
@media (min-width: 1240px) { .pulse { display: inline-flex; } }
body.lightable { cursor: pointer; }

/* ---------- hero: who it is for ---------- */
.starts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
.starts-l { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.starts a { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 8px 12px 8px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .75); transition: border-color .2s, color .2s, background-color .2s; }
.starts a:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.sg { display: inline-block; width: 9px; height: 9px; flex: none; background: radial-gradient(circle, var(--c) 1.5px, transparent 1.95px) 0 0 / 4.5px 4.5px; }
.sg.b { --c: var(--excite); } .sg.t { --c: var(--alga); } .sg.e { --c: var(--eyespot); } .sg.a { --c: var(--chain); }

/* ---------- section head with the sub to the right ---------- */
.head-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; }
.head-row .sub { padding-bottom: 6px; }

/* ---------- use cases: tabs ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-top: 40px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1 var(--sans); color: var(--ink-2); background: transparent; border: 0; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab[aria-selected="true"] .sg { --c: #fff; }
.panes { display: grid; margin-top: 22px; }
.pane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4.5vw, 64px); align-items: start;
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s; }
.pane[hidden] { display: grid; visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.pane-copy { display: grid; gap: 18px; padding-top: 18px; }
.who { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pane-copy h3 { font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -.018em; text-wrap: balance; max-width: 19ch; }
.ticks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ticks li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.ticks b { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pane-note { font-size: 15px; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--excite); }
.pane-note b { color: var(--ink); font-weight: 600; }
#pane-trade .pane-note { border-color: var(--alga); }
#pane-explore .pane-note { border-color: var(--eyespot); }
#pane-teams .pane-note { border-color: var(--chain); }

/* ---------- the bench: a trial console ---------- */
.bench { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -56px rgba(14, 19, 22, .5), 0 1px 0 rgba(14, 19, 22, .04); }
.b-top { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.b-lights { display: inline-flex; gap: 5px; }
.b-lights i { width: 8px; height: 8px; border-radius: 50%; background: #dcdcd3; }
.b-lights i:first-child { background: var(--excite); opacity: .75; }
.b-title { font: 400 12.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-re { white-space: nowrap; flex: none; margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 8px; cursor: pointer; transition: border-color .2s, color .2s; }
.b-re:hover { border-color: var(--ink); color: var(--ink); }
.b-re + .b-sim { margin-left: 0; }
.b-sim { margin-left: auto; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 5px 7px; border: 1px dashed var(--line-2); border-radius: 5px; }
.b-cmd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; font: 400 14px/1.4 var(--mono); color: var(--ink); }
.b-cmd .ps { color: var(--alga); font-weight: 600; }
.b-typed { white-space: nowrap; overflow: hidden; }
.b-typed.typing::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: blink 1s steps(2, jump-none) infinite; }
.b-stat { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px 12px; font: 400 11.5px/1.3 var(--mono); color: var(--dim); }
.b-pairs b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.lg { display: inline-block; width: 12px; height: 2px; vertical-align: 3px; margin: 0 2px; border-radius: 2px; }
.lg.ink { background: var(--ink-2); } .lg.ex { background: var(--excite); }
.b-pnl { display: block; width: calc(100% - 32px); height: 96px; margin: 14px 16px 0; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.b-rows { border-top: 1px solid var(--line); }
.b-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 118px 88px 66px 96px; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 400 13px/1.2 var(--mono); transition: background-color .3s, opacity .3s; }
.b-row[data-state="pending"] { opacity: .42; }
.b-row[data-state="run"] { background: linear-gradient(90deg, var(--ex-soft), rgba(232, 240, 254, 0) 80%); }
.b-row.custom { box-shadow: inset 3px 0 0 var(--eyespot); }
.b-k { color: var(--dim); font-size: 11.5px; }
.b-n { color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-ci { display: flex; align-items: center; justify-content: space-between; height: 14px; }
.b-ci i { width: 5px; height: 5px; border-radius: 50%; background: #dddcd2; transition: background-color .15s, transform .15s; }
.b-ci i.z { background: transparent; box-shadow: 0 0 0 1.25px var(--ink-2); }
.b-ci i.on { background: var(--c, var(--excite)); transform: scale(1.25); }
.b-ci i.est { transform: scale(1.75); }
.b-row[data-v="excites"] { --c: var(--excite); }
.b-row[data-v="inhibits"] { --c: var(--inhibit); }
.b-row[data-v="inert"] { --c: #8c979a; }
.b-row[data-v="unresolved"] { --c: var(--unres); }
.b-row[data-state="run"] { --c: #8fb4ef; }
.b-row .vchip { justify-self: start; }
.vchip[data-v="run"] { color: var(--dim); border-style: dashed; background: transparent; }
.vchip[data-v="pending"] { color: var(--faint); border-color: var(--line-2); background: transparent; }
.vchip[data-v="unresolved"] { color: var(--unres); border-style: dashed; background: #f1eefd; }
.b-e { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--c, var(--ink)); text-align: right; }
.b-row[data-v="inert"] .b-e { color: var(--ink-2); }
.b-x { font-size: 11.5px; color: var(--dim); text-align: right; white-space: nowrap; }
.b-x.warn { color: var(--inhibit); }
.b-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 12px 16px; font: 400 12px/1 var(--mono); color: var(--dim); background: linear-gradient(180deg, var(--white), var(--paper)); transition: opacity .4s; }
.b-sum b { font-weight: 500; color: var(--ink); padding: 6px 8px; border-radius: 6px; background: var(--white); border: 1px solid var(--line-2); }
.bench[data-running="true"] .b-sum { opacity: .35; }
.b-add { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.b-add label { font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.b-add input { flex: 1; min-width: 0; font: 400 14px/1 var(--mono); color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; }
.b-add input:focus { outline: none; border-color: var(--excite); box-shadow: 0 0 0 3px rgba(31, 111, 229, .15); }
.b-add .btn { padding: 11px 14px; font-size: 14px; white-space: nowrap; }
.b-msg { min-height: 0; padding: 0 16px; font: 400 11.5px/1.4 var(--mono); color: var(--chain); background: var(--paper); }
.b-msg:not(:empty) { padding: 0 16px 12px; }

/* explorers: the atlas */
.at-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 10px; }
.at { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; width: 100%; padding: 10px; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s, transform .3s var(--ease); }
.at:hover { border-color: var(--line-2); background: #fff; }
.at[aria-pressed="true"] { background: #fff; border-color: var(--ink); box-shadow: 0 10px 24px -18px rgba(14, 19, 22, .5); }
.idn { grid-row: 1 / 3; width: 40px; height: 40px; display: block; }
.at-t { display: grid; gap: 2px; min-width: 0; }
.at-t b { font: 500 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-t span { font: 400 11px/1.2 var(--mono); color: var(--dim); }
.at-v { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.at-v i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--dim)); }
.at-v[data-v="excites"] { --c: var(--excite); } .at-v[data-v="inert"] { --c: #8c979a; } .at-v[data-v="inhibits"] { --c: var(--inhibit); } .at-v[data-v="unresolved"] { --c: var(--unres); }
.at-line { padding: 2px 16px 14px; min-height: 3.2em; font: 400 12.5px/1.45 var(--mono); color: var(--ink-2); }
.queue { border-top: 1px solid var(--line); padding: 12px 16px 6px; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.q-head > b { font: 500 14px/1.2 var(--sans); }
.q-clock { font: 400 12px/1 var(--mono); color: var(--dim); }
.q-clock b { color: var(--eyespot); font-weight: 500; font-variant-numeric: tabular-nums; }
.q-list { display: grid; margin-top: 6px; }
.q-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line-2); font: 400 13px/1.2 var(--mono); counter-increment: q; }
.q-list { counter-reset: q; }
.q-list li::before { content: counter(q); font-size: 11px; color: var(--faint); }
.q-list li:last-child { border-bottom: 0; }
.q-n { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-b { color: var(--eyespot); font-variant-numeric: tabular-nums; }
.q-list li.lit { color: var(--excite); }
.q-list li.lit .q-n { color: var(--excite); }
.q-list li.lit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--excite); box-shadow: 0 0 0 3px rgba(31, 111, 229, .15); animation: blink 1.2s steps(2, jump-none) infinite; }
.q-list li.new { animation: feedin .8s var(--ease); }

/* ---------- unlocks ---------- */
.unlocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.unl { display: grid; grid-template-rows: auto auto auto 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; padding-bottom: 20px; transition: border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.unl:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 24px 48px -34px rgba(14, 19, 22, .45); }
.glyph { display: block; width: 100%; height: 124px; background: var(--paper); border-bottom: 1px solid var(--line); }
.unl .u-k { margin: 16px 18px 0; }
.unl h3 { margin: 8px 18px 0; font: 400 23px/1.15 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.unl p { margin: 8px 18px 0; font-size: 15px; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .unlocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-row { grid-template-columns: 54px minmax(0, 1fr) 104px 84px 60px; }
  .b-row .b-x { display: none; }
  .b-ci i { width: 4.5px; height: 4.5px; }
}
@media (max-width: 1000px) {
  .head-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pane { grid-template-columns: minmax(0, 1fr); }
  .pane-copy { padding-top: 0; }
  .pane-copy h3 { max-width: 22ch; }
  .b-row { grid-template-columns: 54px minmax(0, 1fr) 118px 84px 62px 96px; }
  .b-row .b-x { display: block; }
}
@media (max-width: 680px) {
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tab { justify-content: center; padding: 12px 10px; }
  .b-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n chip" "ci e" "k x"; gap: 6px 12px; padding: 11px 14px; }
  .b-k { grid-area: k; } .b-n { grid-area: n; } .b-ci { grid-area: ci; max-width: 150px; } .b-row .vchip { grid-area: chip; justify-self: end; } .b-e { grid-area: e; } .b-row .b-x { grid-area: x; display: block; }
  .b-cmd { font-size: 12.5px; padding-inline: 14px; }
  .b-lights { display: none; }
  .b-sim { flex: none; }
  .b-stat, .b-sum, .b-add, .b-top { padding-inline: 14px; }
  .b-add { flex-wrap: wrap; }
  .b-add label { width: 100%; }
  .at-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; }
  .unlocks { grid-template-columns: minmax(0, 1fr); }
  .glyph { height: 112px; }
  .starts-l { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pane, .pane[hidden] { transition: none; transform: none; }
}