/* ---------- sections ---------- */
section.blk{display:grid}

.head{display:grid}

/* as-code */
.pipe{position:relative}
.stage{display:grid;gap:6px;align-content:start;position:relative}
.stage+.stage{margin-left:18px}
.stage+.stage::before{content:"→";position:absolute;left:-17px;top:50%;transform:translateY(-50%);color:var(--accent);font:700 16px var(--mono)}
.stage h3{font:700 15px var(--mono)}
.stage p{color:var(--ink-2)}
.ascode{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr)}
.ascode pre{margin:0;padding:24px 16px 16px;font:12.5px/1.65 var(--mono);overflow-x:auto;color:var(--ink)}
.check{padding:24px 16px 16px;display:grid;gap:10px;align-content:start;font-size:14px}
.check .row{display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap}
.check .row b{font-family:var(--mono);font-size:13px}
.check .x{color:var(--high);font-weight:700} .check .v{color:var(--ok);font-weight:700}
.check .cm{background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:12.5px/1.55 var(--mono);color:var(--ink-2)}

/* rules explorer */
.rx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:22px}
.rl{display:grid;gap:2px;padding:20px 8px 8px;align-content:start}
.rl button{display:grid;grid-template-columns:3.4em minmax(0,1fr) 2.6em;gap:10px;align-items:center;text-align:left;background:none;border:0;border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--ink-2);font:15px var(--sans)}
.rl button:hover{background:var(--raised)}
.rl button.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--ink)}
.rl .c{font:700 13px var(--mono);color:var(--accent)}
.rl .bar{height:4px;border-radius:2px;background:var(--line);grid-column:2;margin-top:-4px;overflow:hidden}
.rl .bar i{display:block;height:100%;background:var(--accent)}
.rl .cnt{font:12.5px var(--mono);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1}
.rd{padding:26px 22px 22px;display:grid;gap:14px;align-content:start}
.rd h3{font-size:26px;font-weight:600}
.rd .q{color:var(--ink-2);font-size:18px}
.rd .pid{font:600 13px var(--mono);color:var(--ink)} .rd .pid span{color:var(--ink-3);font-weight:400}
.rd .ex{display:grid;gap:10px}
.rd .ex div{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rd .ex b{display:block;font:700 11px var(--mono);letter-spacing:.08em;padding:5px 12px;border-bottom:1px solid var(--line)}
.rd .ex .bad b{color:var(--high);background:color-mix(in srgb,var(--high) 10%,transparent)}
.rd .ex .good b{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.rd .ex pre{margin:0;padding:10px 12px;font:12.5px/1.6 var(--mono);overflow-x:auto;background:var(--raised)}
.rd .why{color:var(--ink-2);font-size:15px}
.rl button{position:relative;overflow:hidden}
.rl.auto button.on::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;animation:rlbar 3.6s linear both}
@keyframes rlbar{from{transform:scaleX(0)}}
.note{font-size:14px;color:var(--ink-3)}

/* goblin */
.gob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.toggle{display:inline-flex;border:1px solid var(--line-2);padding:3px;gap:2px;background:var(--sheet)}
.toggle button{font:600 13px var(--mono);border:0;background:none;color:var(--ink-2);padding:6px 14px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--accent);color:var(--page)}
.mini{font:12px/1.5 var(--mono);white-space:pre;margin:0;padding:14px;overflow-x:auto;color:var(--ink-2);background:var(--raised);border:1px solid var(--line-2);border-radius:10px}
.mini .a{color:var(--accent)} .mini .d{color:var(--ink-3)} .mini .h{color:var(--high)}
.gtxt{display:grid;gap:14px}
.gtxt p{color:var(--ink-2)}
.nv{width:100%;border-collapse:collapse;font-size:15px}
.nv th{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-2)}
.nv td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.nv td:first-child{color:var(--ink-3);font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.nv td:nth-child(2){white-space:nowrap}
.nvwrap{overflow-x:auto}
kbd{font:600 12.5px var(--mono);color:var(--ink);background:var(--raised);border:1px solid var(--line-2);border-radius:5px;white-space:nowrap}

/* privacy */
.priv{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.priv li{padding:22px 18px 18px;display:grid;gap:6px}
.priv h3{font-size:18px;font-weight:600}
.priv p{color:var(--ink-2);font-size:15px}

/* install */
.install{display:grid;gap:14px;padding:30px 22px 24px}
.install .cmd{background:var(--raised)}
.foot{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding-block:56px 80px;margin-top:96px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}