.finds li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:600;color:var(--ink);line-height:1.4}

.fn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#dbe5f3;display:grid;place-items:center;font-size:13px}

.more{margin-top:16px}

/* details */
details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:8px 0;overflow:hidden}

summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}

summary::-webkit-details-marker{display:none}

summary::after{content:"";width:8px;height:8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);transition:transform .15s;flex:none;margin-right:4px}

details[open]>summary::after{transform:rotate(-135deg)}

.dbody{padding:0 16px 14px;font-size:15px;overflow-wrap:anywhere}

.dbody h3,.dbody h4,.dbody h5{font-size:15px;margin:16px 0 6px;color:var(--ink)}

.dbody ul,.dbody ol{padding-left:20px}

.dbody li{margin:3px 0}

blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid #94a3b8;background:#f8fafc;border-radius:0 8px 8px 0}

.tablewrap{overflow-x:auto;margin:10px 0;border:1px solid var(--line);border-radius:10px}

table{border-collapse:collapse;width:100%;font-size:13.5px}

th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}

th{background:#f8fafc;font-weight:650;color:var(--ink);white-space:nowrap}

tr:last-child td{border-bottom:0}

.ref{color:var(--muted)}

/* project page */
.phero{background:radial-gradient(900px 300px at 90% -20%,#10324a 0,transparent 60%),var(--ink);color:#fff;padding:22px 0 30px}

.back{color:#94a3b8;text-decoration:none;font-size:14px;font-weight:500}

.back:hover{color:#fff}

.ptitle{display:flex;gap:14px;align-items:center;margin-top:18px}

.ptitle .eyebrow{margin:0 0 2px}

.phero h1{margin:0;font-size:clamp(28px,6vw,44px);letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere}

.sub{color:#cbd5e1;font-size:17px;margin:12px 0 16px;max-width:720px}

.pbig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 16px}

.pbig b{font-size:46px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}

.pbig span:not(.who){color:#94a3b8;font-size:14px}

.pbig .who{margin:0}

.pgrid{max-width:var(--content-width);padding-top:24px;padding-bottom:40px}

.lead{font-size:16.5px;margin-bottom:8px;overflow-wrap:anywhere}

.lead .q{font-size:20px;font-weight:650;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}

.lead p{margin:0 0 10px}

.fine{font-size:12.5px;color:var(--muted);margin:10px 0 0}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:16px 0}

.panel.more{background:transparent;border:0;padding:0}

.ph{margin:0 0 14px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* flow diagram */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}

.step{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;font-size:14.5px;line-height:1.45}

.step:not(:last-child)::after{content:"";position:absolute;left:26px;bottom:-19px;width:2px;height:18px;background:#cbd5e1}

.step:not(:last-child)::before{content:"";position:absolute;left:22px;bottom:-20px;border:5px solid transparent;border-top-color:#94a3b8;border-bottom:0}

.role{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;margin-bottom:8px}

.role i,.lg i{width:8px;height:8px;border-radius:50%;display:inline-block;background:currentColor}

.stext{display:block;color:var(--text)}

.s-code .role{background:var(--code-bg);color:var(--code)}

.s-jev .role{background:var(--jev-bg);color:var(--jev)}

.s-human .role{background:var(--human-bg);color:var(--human)}

.s-out .role{background:var(--ink);color:#dbe5f3}

.s-jev{border-color:#a7f3d0;box-shadow:inset 3px 0 0 var(--jev)}

.s-code{box-shadow:inset 3px 0 0 #94a3b8}

.s-human{border-color:#fde68a;box-shadow:inset 3px 0 0 #f59e0b}

.s-out{box-shadow:inset 3px 0 0 var(--ink)}