/* /product: renderings of the product, drawn in its own dark theme
   (web/src/index.css) at a fixed 1120px and scaled to the column. */
.app-root {
  --a-bg: #111315; --a-panel: #191c1f; --a-panel-2: #20242a; --a-line: #2b3038;
  --a-fg: #e6e8eb; --a-muted: #8a919c; --a-accent: #4f9cf9; --a-accent-soft: rgba(79,156,249,.18);
  --a-pos: #3fb950; --a-pos-soft: rgba(63,185,80,.16); --a-neg: #f0524f; --a-neg-soft: rgba(240,82,79,.16);
  --m0: #7aa2f7; --m1: #9ece6a; --m2: #e0af68; --m3: #bb9af7; --m4: #7dcfff; --m5: #f7768e; --m6: #73daca; --m7: #ff9e64;
}

.p-hero { padding: 72px 0 24px; }
.p-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 18ch; }
.p-hero .lede { max-width: 56ch; }
.p-toc { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p-toc a { display: inline-block; font-family: var(--mono); font-size: .78rem; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); background: var(--surface); }
.p-toc a:hover { color: var(--accent); border-color: var(--accent); }

.render { padding: 72px 0; border-bottom: 1px solid var(--border); }
.render-head { display: grid; gap: 10px; margin-bottom: 26px; }
@media (min-width: 900px) { .render-head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } }
.render-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.render-head p { color: var(--muted); max-width: 56ch; }
.legend { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px 28px; }
@media (min-width: 720px) { .legend { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .legend { grid-template-columns: repeat(4, 1fr); } }
.legend li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .9rem; color: var(--muted); line-height: 1.4; }
.legend b { color: var(--text); font-weight: 500; }
.legend .pin { position: static; }

/* the frame: a fixed-width app scaled to fit (product.js sets --s) */
.frame { position: relative; --s: 1; height: calc(var(--h, 640px) * var(--s)); }
.frame > .app { position: absolute; left: 0; top: 0; width: 1120px; transform: scale(var(--s)); transform-origin: 0 0; }
.no-js .frame { height: auto; overflow-x: auto; }
.no-js .frame > .app { position: relative; transform: none; }

.app { background: var(--a-bg); color: var(--a-fg); border: 1px solid #000; border-radius: 12px; overflow: hidden;
  font-family: var(--sans); font-size: 12px; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 40px 90px -40px rgba(15,18,40,.6); }
.app .mono, .app code { font-family: var(--mono); }
.a-top { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--a-line); }
.a-top .brand-t { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.a-top .sub { color: var(--a-muted); }
.a-live { display: inline-flex; align-items: center; gap: 6px; }
.a-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-pos); box-shadow: 0 0 0 3px var(--a-pos-soft); }
.a-top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--a-muted); font-family: var(--mono); font-size: 11px; }
.a-chip { padding: 2px 8px; border: 1px solid var(--a-line); border-radius: 5px; color: var(--a-fg); }
.a-chip.acc { border-color: var(--a-accent); color: var(--a-accent); }
.a-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
.a-panel { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; }
.a-btn { display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-panel-2); color: var(--a-fg); text-align: center; font-size: 12px; }
.a-btn.on { border-color: var(--a-accent); box-shadow: inset 0 0 0 1px var(--a-accent); }
.a-btn small { color: var(--a-muted); font-family: var(--mono); margin-left: 6px; }
.a-btn.go { background: var(--a-accent); border-color: var(--a-accent); color: #0b1220; font-weight: 600; }
.pos { color: var(--a-pos); } .neg { color: var(--a-neg); } .mut { color: var(--a-muted); } .acc { color: var(--a-accent); }
.dotg { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-pos); margin-right: 6px; vertical-align: 1px; }

/* tables inside the app */
.a-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.a-table th { text-align: left; font-weight: 400; color: var(--a-muted); padding: 6px 8px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.a-table td { padding: 5px 8px; border-bottom: 1px solid rgba(43,48,56,.5); white-space: nowrap; }
.a-table tr.w-neg td { background: var(--a-neg-soft); }
.a-table tr.w-pos td { background: var(--a-accent-soft); }
.a-table tr.sel td { background: var(--a-accent-soft); box-shadow: inset 0 1px 0 var(--a-accent), inset 0 -1px 0 var(--a-accent); }
.a-table td.r, .a-table th.r { text-align: right; }

/* the DAG */
.dagsvg { display: block; width: 100%; height: auto; }
.dagsvg .e { fill: none; stroke: #3a404a; stroke-width: 1.3; }
.dagsvg .e.hot { stroke: var(--a-accent); stroke-width: 2; }
.dagsvg .e.lit { stroke: var(--a-pos); stroke-width: 2; }
.dagsvg .dnode rect.b { fill: var(--a-panel); stroke: var(--a-line); }
.dagsvg .dnode.sel rect.b { stroke: var(--a-accent); stroke-width: 1.5; }
.dagsvg .dnode.lit rect.b { stroke: var(--a-pos); stroke-width: 1.5; }
.dagsvg .dnode.dim { opacity: .35; }
.dagsvg .k { font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; fill: var(--a-muted); }
.dagsvg .n { font-family: var(--sans); font-size: 10.5px; font-weight: 600; fill: var(--a-fg); }
.dagsvg .ok { fill: var(--a-pos); }
.dagsvg .port { fill: var(--a-bg); stroke: #5a616d; }
.dagsvg .pl { fill: var(--a-accent); filter: drop-shadow(0 0 3px rgba(79,156,249,.9)); }
.dagsvg .heat { font-family: var(--mono); font-size: 7.5px; fill: var(--m7); }

/* numbered callouts pinned on a rendering */
.pin { position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 11px/22px var(--sans); text-align: center; box-shadow: 0 0 0 4px rgba(31,63,255,.22), 0 4px 10px rgba(0,0,0,.3); }
.app { position: relative; }
.app .pin { transform: translate(-50%, -50%) scale(calc(1 / var(--s))); }
.no-js .app .pin { display: none; }

/* 1. pipeline */
.pp { display: grid; grid-template-columns: 180px 1fr 340px; grid-template-rows: 602px; height: 602px; }
.pp > div { min-height: 0; overflow: hidden; }
.pp-left { border-right: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 7px; }
.pp-left .a-label { margin: 6px 0 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-family: var(--mono); font-size: 11px; }
.kv span:nth-child(odd) { color: var(--a-muted); }
.slider { position: relative; height: 4px; margin: 10px 0 4px; border-radius: 2px; background: var(--a-line); }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 2px; background: var(--a-accent); }
.slider b { position: absolute; left: 34%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--a-fg); }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--a-muted); }
.pp-mid { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.pp-tools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--a-line); align-items: center; }
.pp-tools .a-chip { font-size: 11px; }
.pp-tools .hint { color: var(--a-muted); font-size: 11px; margin-left: 8px; }
.pp-dag { padding: 6px 8px; min-height: 0; overflow: hidden; }
.pp-dag .dagsvg { height: 100%; }
.pp-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--a-line); }
.pp-strip div { padding: 9px 10px; border-right: 1px solid var(--a-line); }
.pp-strip div:last-child { border-right: 0; }
.pp-strip b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; margin: 3px 0 1px; }
.pp-strip small { color: var(--a-muted); font-family: var(--mono); font-size: 9.5px; }
.pp-right { border-left: 1px solid var(--a-line); display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
.pp-models { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 5px 12px; border-bottom: 1px solid var(--a-line); font-size: 11.5px; }
.pp-models .a-label { width: 100%; }
.pp-watch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--a-line); }
.pp-watch .a-panel { padding: 8px 10px; }
.pp-watch b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; margin: 2px 0; }
.pp-watch small { color: var(--a-muted); font-size: 10px; }
.pp-rows { padding: 6px 4px; overflow: hidden; }
.pp-rows .cap { padding: 2px 8px 4px; color: var(--a-muted); font-size: 11px; }
.flashrow td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { 0% { background: var(--a-accent-soft); } 100% { background: transparent; } }

/* 2. workspace */
.ws { display: grid; grid-template-columns: 200px 1fr 300px; grid-template-rows: 1fr 168px; height: 640px; }
.ws-side { grid-row: 1 / 3; border-right: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 8px; }
.ws-side .a-label { margin-top: 8px; }
.ws-link { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: var(--a-panel); border: 1px solid var(--a-line); font-size: 11.5px; }
.ws-link i { width: 3px; height: 14px; border-radius: 2px; }
.ws-stage { padding: 4px 8px; border-left: 2px solid var(--a-line); color: var(--a-muted); font-size: 11.5px; }
.ws-stage.on { border-color: var(--a-accent); color: var(--a-fg); }
.ws-mid { padding: 12px 14px; display: grid; align-content: start; gap: 8px; overflow: hidden; }
.ws-card { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; }
.ws-card.sel { border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent); }
.ws-card header { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; }
.ws-card header .st { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--m4); }
.ws-card header .rw { margin-left: auto; font-family: var(--mono); color: var(--a-muted); font-size: 11px; }
.ws-card .a-table { border-top: 1px solid var(--a-line); }
.ws-div { display: flex; align-items: center; gap: 8px; color: var(--a-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ws-div::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }
.ws-insp { border-left: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 10px; }
.cond { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.cond span { padding: 5px 7px; border: 1px solid var(--a-line); border-radius: 5px; background: var(--a-panel-2); font-family: var(--mono); font-size: 10.5px; text-align: center; }
.cond span.op { border: 0; background: none; color: var(--a-accent); }
.casetab { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; }
.casetab td { border: 1px solid var(--a-line); padding: 5px 7px; }
.casetab td:first-child { color: var(--a-muted); width: 44px; }
.bar2 { height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--m7); }
.ws-sql { grid-column: 2 / 4; border-top: 1px solid var(--a-line); padding: 10px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: #c9ccd3; white-space: pre; overflow: hidden; }
.ws-sql .kw { color: #8fa6ff; } .ws-sql .fn { color: var(--m4); } .ws-sql .str { color: var(--m2); } .ws-sql .num { color: var(--m5); }
.ws-sql .hl { background: var(--a-accent-soft); outline: 1px solid rgba(79,156,249,.4); border-radius: 2px; }

/* 3. review */
.rv { display: grid; grid-template-columns: 1fr 340px; height: 470px; }
.rv-main { padding: 14px 16px; display: grid; align-content: start; gap: 12px; }
.rv-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rv-sum .a-panel { padding: 9px 11px; }
.rv-sum b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; margin-top: 3px; }
.rv-side { border-left: 1px solid var(--a-line); padding: 14px; display: grid; align-content: start; gap: 12px; }
.chain { display: grid; gap: 6px; }
.chain div { display: flex; justify-content: space-between; padding: 6px 9px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-panel); }
.prog { height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--a-accent); transition: width 2.6s cubic-bezier(.3,.6,.3,1); }
.play .prog i { width: 100%; }
.status-steps { display: grid; gap: 6px; font-family: var(--mono); font-size: 11px; }
.status-steps span { display: flex; gap: 8px; align-items: center; color: var(--a-muted); }
.status-steps span i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--a-muted); }
.status-steps span.done { color: var(--a-fg); } .status-steps span.done i { background: var(--a-pos); border-color: var(--a-pos); }

/* 4. provenance */
.pv { display: grid; grid-template-columns: 1fr 380px; height: 560px; }
.pv-dag { padding: 10px; border-right: 1px solid var(--a-line); display: grid; grid-template-rows: auto 1fr; }
.pv-walk { padding: 12px; display: grid; align-content: start; gap: 0; overflow: hidden; }
.pv-step { position: relative; padding: 0 0 12px 18px; }
.pv-step::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: -6px; width: 1px; background: var(--a-line); }
.pv-step:last-child::before { display: none; }
.pv-step::after { content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--a-bg); border: 1.5px solid var(--a-pos); }
.pv-step h4 { margin: 0 0 5px; font-size: 11.5px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.pv-step h4 .a-label { font-size: 9px; }
.pv-step .a-table { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; }
.pv-step .found { color: var(--a-muted); font-family: var(--mono); font-size: 10px; margin-top: 3px; }

/* 5. trace */
.tr { height: 380px; display: grid; grid-template-columns: 250px 1fr 1fr 250px; }
.tr > div { padding: 12px; border-right: 1px solid var(--a-line); display: grid; align-content: start; gap: 8px; }
.tr > div:last-child { border-right: 0; }
.tr .a-label b { color: var(--a-fg); }
.tr pre { margin: 0; padding: 9px 10px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; color: #c9ccd3; }
.tr pre .kw { color: #8fa6ff; }
.wave { display: grid; gap: 5px; }
.wave .op { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 9px; background: var(--a-panel); border: 1px solid var(--a-line); border-left: 3px solid var(--m0); border-radius: 6px; }
.wave .op small { grid-column: 1 / -1; font-family: var(--mono); color: var(--a-muted); font-size: 10px; }
.wave .op b { font-weight: 600; font-size: 11.5px; }
.wave .op em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--a-muted); }
.verdict { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; }
.verdict .pos { font-family: var(--mono); font-size: 10.5px; }

/* 6. tenants */
.tn { display: grid; grid-template-columns: 1fr 360px; height: 500px; }
.tn-list { padding: 12px 14px; border-right: 1px solid var(--a-line); overflow: hidden; }
.tn-list .a-table td .sp { display: inline-block; width: 70px; height: 14px; vertical-align: middle; }
.tn-list .a-table td .sp polyline { fill: none; stroke: var(--a-accent); stroke-width: 1.4; }
.tn-one { padding: 14px; display: grid; align-content: start; gap: 10px; }
.tn-one h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.meter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meter .a-panel { padding: 8px 10px; }
.meter b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; margin-top: 2px; }

/* 7. agents + wire */
.duo { display: grid; gap: 18px; }
@media (min-width: 960px) { .duo { grid-template-columns: 1.15fr 1fr; } }
.duo .frame { --h: 560px; }
.ag { height: 560px; display: grid; grid-template-rows: 38px 1fr 54px; }
.ag-body { padding: 16px 18px; display: grid; align-content: start; gap: 10px; overflow: hidden; }
.ag .msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ag .msg.u { justify-self: end; background: #2c3340; }
.ag .msg.b { justify-self: start; background: transparent; padding-left: 0; }
.ag .call { border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); overflow: hidden; }
.ag .call header { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 11.5px; }
.ag .call header .srv { font-family: var(--mono); font-size: 10px; color: var(--a-accent); text-transform: uppercase; letter-spacing: .06em; }
.ag .call header .ok { margin-left: auto; color: var(--a-pos); font-family: var(--mono); font-size: 10.5px; }
.ag .call pre { margin: 0; padding: 7px 10px; border-top: 1px solid var(--a-line); font-size: 10.5px; line-height: 1.5; color: #c9ccd3; }
.ag .call.yours header .srv { color: var(--m7); }
.ag-input { border-top: 1px solid var(--a-line); padding: 10px 14px; }
.ag-input div { height: 34px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); color: var(--a-muted); padding: 8px 12px; }
.ag-body > * { opacity: 0; transform: translateY(5px); transition: opacity .35s ease calc(var(--i) * .6s), transform .35s ease calc(var(--i) * .6s); }
.play .ag-body > * { opacity: 1; transform: none; }
.pg { height: 560px; display: grid; grid-template-rows: 38px 1fr; }
.pg pre { margin: 0; padding: 14px 16px; font-size: 11.5px; line-height: 1.55; color: #c9ccd3; white-space: pre; overflow: hidden; }
.pg pre .pr { color: var(--a-pos); } .pg pre .kw { color: #8fa6ff; } .pg pre .mut { color: var(--a-muted); }
.pg .tl { display: block; opacity: 0; transition: opacity .2s ease calc(var(--i) * .12s + .3s); }
.play .pg .tl { opacity: 1; }
.pg pre { white-space: normal; } .pg .tl { white-space: pre; }

.p-note { margin-top: 12px; font-size: .8rem; color: var(--faint); }
.p-cta { padding: 80px 0; text-align: left; }
.p-cta h2 { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .app *, .app { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   Phone layouts. When a rendering's column is narrow, product.js draws
   the app at the column's width, unscaled (.narrow), and each screen stacks
   its panels in one column: full size on an iPhone instead of a third.
   Graphs keep their width and pan sideways.
   --------------------------------------------------------------- */
.frame.narrow .a-top .right, .frame.narrow .pp-tools .hint { display: none; }
.frame.narrow .a-top .sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.frame.narrow .pp, .frame.narrow .ws, .frame.narrow .rv, .frame.narrow .pv, .frame.narrow .tn, .frame.narrow .tr { display: block; height: auto; }
.frame.narrow .pp > div, .frame.narrow .pv > div, .frame.narrow .tn > div, .frame.narrow .rv > div, .frame.narrow .tr > div, .frame.narrow .ws > div { border: 0; border-bottom: 1px solid var(--a-line); }
.frame.narrow .pp > div { overflow: visible; }
.pan { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.frame.narrow .pan .dagsvg { width: 640px; height: auto; }
.frame.narrow .pan::after { content: "swipe the graph →"; display: block; padding: 4px 2px 0; font-family: var(--mono); font-size: 10px; color: var(--a-muted); }
/* pipeline: the transaction you ran, the graph, freshness, the view */
.frame.narrow .pp-left { display: grid; grid-template-columns: 1fr 1fr; }
.frame.narrow .pp-left > * { grid-column: 1 / -1; }
.frame.narrow .pp-left .a-btn { grid-column: auto; }
.frame.narrow .pp-left .a-btn:nth-of-type(n+6), .frame.narrow .pp-left .slider, .frame.narrow .pp-left .ticks,
.frame.narrow .pp-left > :nth-child(n+9) { display: none; }
.frame.narrow .pp-mid { display: block; }
.frame.narrow .pp-strip { grid-template-columns: repeat(3, 1fr); }
.frame.narrow .pp-strip div:nth-child(3n) { border-right: 0; }
.frame.narrow .pp-strip div:nth-child(-n+3) { border-bottom: 1px solid var(--a-line); }
.frame.narrow .pp-rows tbody tr:nth-child(n+9) { display: none; }
/* workspace: where it sits as chips, then the steps, the step, the SQL */
.frame.narrow .ws-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.frame.narrow .ws-side .a-label { width: 100%; margin-top: 4px; }
.frame.narrow .ws-side .ws-stage { border-left-width: 2px; }
.frame.narrow .ws-card:not(.sel) { font-size: 11.5px; }
.frame.narrow .ws-sql { white-space: pre-wrap; font-size: 10.5px; }
/* review, provenance, trace, customers */
.frame.narrow .rv-sum { grid-template-columns: 1fr 1fr; }
.frame.narrow .rv-main .a-table tbody tr:nth-child(n+5) { display: none; }
.frame.narrow .pv-walk .pv-step:nth-child(5) { display: none; }
.frame.narrow .tr > div { padding-bottom: 14px; }
.frame.narrow .tn-list .a-table :is(th, td):is(:nth-child(5), :nth-child(6)) { display: none; }
.frame.narrow .ws-card.sel .a-table :is(th, td):nth-child(2) { display: none; }
.frame.narrow .tn-list tbody tr:nth-child(n+9) { display: none; }
/* agent and psql */
.frame.narrow .ag, .frame.narrow .pg { height: auto; }
.frame.narrow .ag .msg { max-width: 94%; font-size: 12.5px; }
.frame.narrow .ag-body > * { transition-delay: calc(var(--i) * .25s); }
.frame.narrow .pg .tl { transition-delay: calc(var(--i) * .05s); }
.frame.narrow .ag .call pre { white-space: pre-wrap; word-break: break-word; }
.frame.narrow .pg .tl { white-space: pre-wrap; }
.frame.narrow .pg pre { font-size: 10.5px; }
.frame.narrow .pg .tl.more { display: none; }
@media (max-width: 640px) {
  .render { padding: 56px 0; }
  .render-head { margin-bottom: 18px; }
  .p-toc a { padding: 9px 12px; }
}