/* layout and cards */
.bento { display: grid; gap: 13px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(132px, auto); }
.cell {
    position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); backdrop-filter: blur(10px); padding: 20px;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.cell:hover { border-color: rgba(232,232,236,0.32); z-index: 2; }
.cell .idx { font-size: 0.55rem; color: var(--dim); letter-spacing: 3px; }
.cell h3 { font-family: var(--serif); font-weight: 700; font-size: 1rem; margin: 8px 0 8px; }
.cell p { font-size: 0.66rem; color: var(--dim); line-height: 1.85; }
.span2 { grid-column: span 3; } .span4 { grid-column: span 6; }
.stat-big { font-family: var(--serif); font-weight: 800; margin-top: 8px; letter-spacing: -0.02em;
    font-size: clamp(0.9rem, 2.4cqi, 2rem); line-height: 1.05; white-space: nowrap; }
.cell { container-type: inline-size; }
@supports not (container-type: inline-size) { .stat-big { font-size: clamp(0.9rem, 1.7vw, 1.6rem); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips span { font-size: 0.56rem; letter-spacing: 1px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); }
.term { background: #0a0a0e; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; font-size: 0.62rem; line-height: 1.85; overflow: hidden; }
.term-bar { display: flex; gap: 6px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.term pre { padding: 13px 15px; color: #9aa88f; white-space: pre-wrap; }
.term .k { color: var(--ink); } .term .c { color: var(--dim); }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(4, 1fr); } .span2 { grid-column: span 2; } .span4 { grid-column: span 4; } }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .span2, .span4 { grid-column: span 2; grid-row: auto; } }

.say { font-size: .68rem; color: var(--dim); line-height: 2.15; max-width: 620px; margin: -12px 0 30px; }

.sub-tag { font-size: .6rem; letter-spacing: 4px; color: var(--dim); margin: 54px 0 20px; display: flex; align-items: center; gap: 14px; }
.sub-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.term-bar .fn { margin-left: 8px; font-size: .5rem; letter-spacing: 1.5px; color: var(--dim); }
.gl-body { position: relative; padding: 18px 20px 6px 44px; }
.gl-c { position: relative; padding-bottom: 18px; }
.gl-c::before { content: ""; position: absolute; left: -24px; top: 7px; width: 7px; height: 7px; border-radius: 50%;
    background: #0a0a0e; border: 1px solid rgba(232,232,236,.45); }
.gl-c.head::before { background: var(--ink); border-color: var(--ink); }
.gl-c:not(:last-child)::after { content: ""; position: absolute; left: -20px; top: 17px; bottom: -7px; width: 1px; background: var(--line); }
.gl-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .6rem; }
.gl-l .h { color: var(--dim); }
.gl-l .ref { color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; font-size: .5rem; letter-spacing: .5px; }
.gl-l b { color: var(--ink); font-weight: 400; }
.gl-l .y { margin-left: auto; color: var(--dim); font-size: .52rem; letter-spacing: 1.5px; }
.gl-c p { margin: 5px 0 0; font-size: .6rem; color: var(--dim); line-height: 1.85; }
.certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.cert { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); padding: 18px; }
.cert b { font-family: var(--serif); font-weight: 800; font-size: 1rem; display: block; }
.cert span { font-size: .46rem; letter-spacing: 2px; color: var(--dim); display: block; margin-top: 6px; line-height: 1.9; }

.lint-body { padding: 8px 18px 10px; }
.lr { display: grid; grid-template-columns: 3.6rem 1fr; gap: 3px 12px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--line); }
.lr .lv { grid-row: 1; grid-column: 1; }
.lr .id { grid-row: 1; grid-column: 2; }
.lr .d { grid-row: 2; grid-column: 2; }
.lr:last-child { border-bottom: 0; }
.lr .id { color: var(--dim); font-size: .56rem; overflow-wrap: anywhere; }
.lr .lv { font-size: .48rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.lr .lv.err { color: #d98b5f; }
.lr .d { color: var(--ink); font-size: .64rem; line-height: 1.75; font-family: var(--mono); }
.lr { transition: background .2s; }
.lr:hover { background: rgba(232,232,236,.03); }

.cell.feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(232,232,236,.55), transparent); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
    .cell.feature::before { animation: sheen 4.5s linear infinite; }
    @keyframes sheen { to { background-position: -200% 0; } }
}
.agentcv { width: 100%; height: 232px; display: block; margin-top: 14px; cursor: pointer; }
.mcpi { margin-top: 4px; font-family: var(--mono); }
.mcpi-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .5rem; letter-spacing: 1.5px; color: var(--dim); }
.mcpi-h b { color: var(--ink); font-weight: 400; }
.mcpi-h button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: .46rem;
    letter-spacing: 1.5px; padding: 2px 9px; cursor: pointer; text-transform: uppercase; transition: color .2s, border-color .2s; }
.mcpi-h button:hover, .mcpi-h button:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.mcpi-b { margin: 8px 0 0; max-height: 250px; overflow: auto; background: rgba(6,6,8,.6); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; font-family: var(--mono); font-size: .56rem; line-height: 1.7; color: var(--dim); white-space: pre; tab-size: 2; }
.mcpi-b .q { color: var(--ink); }
.mcpi-b .ok { color: #7ea87e; }
.mcpi-b .er { color: #d98b5f; }
@media print { .mcpi { display: none !important; } }
@media (max-width: 760px) { .agentcv { height: 210px; } }

.drcv { width: 100%; height: 300px; display: block; margin-top: 16px; }
@media (max-width: 600px) { .drcv { height: 460px; } }
.dr-ctl { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.chaos-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .56rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 10px; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s; }
.chaos-btn svg { width: 17px; height: 17px; flex: none; }
.chaos-btn:hover, .chaos-btn:focus-visible { border-color: #d98b5f; color: #d98b5f; background: rgba(217,139,95,.06); outline: none; }
.chaos-btn:hover svg { animation: mkWig .5s ease; }
@keyframes mkWig { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.chaos-btn:disabled { opacity: .45; cursor: default; color: var(--dim); border-color: var(--line); background: transparent; }
.chaos-btn:disabled svg { animation: none; }
.dr-next { font-family: var(--mono); font-size: .5rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .dr-ctl { display: none; } }
@media print { .dr-ctl { display: none; } }

.pipe { width: 100%; height: auto; display: block; margin-top: 16px; color: rgba(232,232,236,0.3); }
.pipe text { font-family: var(--mono); font-size: 10px; fill: var(--dim); letter-spacing: .4px; text-anchor: middle; }
.pipe .pl { font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; text-anchor: start; fill: rgba(232,232,236,0.3); }
.pipe .pn rect { fill: #0c0c12; stroke: var(--line); stroke-width: 1.2; }
.pipe .pn.on rect { stroke: var(--ink); }
.pipe .pn.on text { fill: var(--ink); }
.pipe .pw { stroke: rgba(232,232,236,0.3); stroke-width: 1.3; }
.pipe .pw.dash { stroke-dasharray: 4 4; stroke: rgba(232,232,236,0.22); }
.pipe .pdot { opacity: 0; }
.pipe .pdot circle { fill: var(--ink); }
.pipe .pglow { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0;
    transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
    .pipe .pn rect { animation: pnbox 9s linear infinite both; }
    .pipe .pn text { animation: pntxt 9s linear infinite both; }
    @keyframes pnbox { 0%, 100% { stroke: var(--line); fill: #0c0c12; } 1.5% { stroke: var(--ink); fill: rgba(232,232,236,0.1); } 8% { stroke: var(--line); fill: #0c0c12; } }
    @keyframes pntxt { 0%, 100% { fill: var(--dim); } 1.5% { fill: var(--ink); } 8% { fill: var(--dim); } }
    .pipe .i1 rect, .pipe .i1 text { animation-delay: .2s; }
    .pipe .i2 rect, .pipe .i2 text { animation-delay: .7s; }
    .pipe .i3 rect, .pipe .i3 text { animation-delay: 1.2s; }
    .pipe .i4 rect, .pipe .i4 text { animation-delay: 1.7s; }
    .pipe .s1 rect, .pipe .s1 text { animation-delay: 3.1s; }
    .pipe .s2 rect, .pipe .s2 text { animation-delay: 3.8s; }
    .pipe .s3 rect, .pipe .s3 text { animation-delay: 4.5s; }
    .pipe .s4 rect, .pipe .s4 text { animation-delay: 5.2s; }
    .pipe .s5 rect, .pipe .s5 text { animation-delay: 5.9s; }
    .pipe .pdot.ing { animation: ping 9s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes ping { 0% { transform: translateX(0); opacity: 0; } 2% { opacity: 1; } 20% { transform: translateX(285px); opacity: 1; } 24%, 100% { transform: translateX(285px); opacity: 0; } }
    .pipe .pdot.srv { animation: psrv 9s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes psrv { 0%, 33% { transform: translateX(0); opacity: 0; } 35% { opacity: 1; } 65% { transform: translateX(440px); opacity: 1; } 69%, 100% { transform: translateX(440px); opacity: 0; } }
    .pipe .pw.dash { animation: pdash 1.5s linear infinite, pkfeed 9s linear infinite; }
    @keyframes pdash { to { stroke-dashoffset: -16; } }
    @keyframes pkfeed { 0%, 22% { stroke: rgba(232,232,236,0.22); } 26% { stroke: var(--ink); } 34%, 100% { stroke: rgba(232,232,236,0.22); } }
    .pipe .pglow { animation: pglow 9s ease-out infinite; }
    @keyframes pglow { 0%, 65% { transform: scale(.5); opacity: 0; } 68% { opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
}

.evid { margin-top: 15px; display: flex; flex-direction: column; gap: 7px; }
.ev { font-family: var(--mono); font-size: .54rem; letter-spacing: 1px; color: var(--dim); line-height: 1.7; }
.ev b { display: inline-block; min-width: 46px; color: var(--ink); font-weight: 400; letter-spacing: 2px; }

.poc { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; font-family: var(--mono); }
.poc summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px; font-size: .54rem; letter-spacing: 1px; color: var(--dim); transition: color .2s; }
.poc summary::-webkit-details-marker { display: none; }
.poc summary::after { content: "\25b8"; font-size: .6rem; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.poc[open] summary::after { transform: rotate(90deg); }
.poc summary:hover, .poc summary:focus-visible { color: var(--ink); outline: none; }
.poc .poc-p { color: var(--ink); }
.poc .poc-n { opacity: .7; }
.poc-t { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .54rem; letter-spacing: .5px; line-height: 1.7; }
.poc-t caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poc-t td { padding: 5px 14px 5px 0; vertical-align: top; color: var(--dim); border-bottom: 1px solid rgba(232,232,236,.05); }
.poc-t td.st { width: 1%; white-space: nowrap; letter-spacing: 1.5px; }
.poc-t td.st.ok { color: #7ea87e; }
.poc-t td.st.on { color: var(--ink); }
.poc-t td.nm { width: 1%; white-space: nowrap; color: var(--ink); }
.poc-t td.nm .tg { color: var(--dim); margin-right: 8px; }
.poc-t td.nm .tg::after { content: " \00b7"; }
.poc-t tr.cm td { color: rgba(232,232,236,.3); padding-top: 12px; border-bottom: 0; }
.poc-t tr:last-child td { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
    .poc[open] .poc-t tbody tr { animation: pocIn .32s cubic-bezier(.22,1,.36,1) both; }
    .poc[open] .poc-t tbody tr:nth-child(2) { animation-delay: .03s; } .poc[open] .poc-t tbody tr:nth-child(3) { animation-delay: .06s; }
    .poc[open] .poc-t tbody tr:nth-child(4) { animation-delay: .09s; } .poc[open] .poc-t tbody tr:nth-child(5) { animation-delay: .12s; }
    .poc[open] .poc-t tbody tr:nth-child(6) { animation-delay: .15s; } .poc[open] .poc-t tbody tr:nth-child(7) { animation-delay: .18s; }
    .poc[open] .poc-t tbody tr:nth-child(8) { animation-delay: .21s; } .poc[open] .poc-t tbody tr:nth-child(9) { animation-delay: .24s; }
    @keyframes pocIn { from { opacity: 0; transform: translateY(3px); } }
}
@media (max-width: 620px) {
    .poc-t tr { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; border-bottom: 1px solid rgba(232,232,236,.05); padding: 5px 0; }
    .poc-t td { border-bottom: 0; padding: 0; width: auto !important; }
    .poc-t td.d { grid-column: 1 / -1; }
    .poc-t tr.cm { border-bottom: 0; padding-top: 10px; }
}
@media print { .poc .poc-t tr { animation: none !important; } }

.threat { margin-top: 18px; }
.th-svg { width: 100%; height: auto; display: block; max-height: 190px; color: var(--ink); }
.th-svg text { font-family: var(--mono); font-size: 10px; fill: var(--dim); letter-spacing: .5px; }
.th-svg .th-lbl { fill: var(--dim); }
#th-bound { fill: none; stroke: rgba(232,232,236,0.18); stroke-width: 1.2; stroke-dasharray: 5 5; transition: stroke .25s; }
.th-arrow { stroke: rgba(232,232,236,0.16); stroke-width: 1.4; color: rgba(232,232,236,0.16); transition: stroke .25s, color .25s; }
.th-node rect { fill: #0c0c12; stroke: var(--line); stroke-width: 1.2; transition: stroke .25s, fill .25s; }
.th-node text { transition: fill .25s; }
#th-atk circle { fill: var(--dim); transition: fill .25s; }
#th-atk text { transition: fill .25s; }
.th-node.on rect { stroke: var(--ink); fill: rgba(232,232,236,0.09); }
.th-node.on text { fill: var(--ink); }
.th-arrow.on { stroke: var(--ink); color: var(--ink); }
#th-bound.on { stroke: var(--ink); }
#th-atk.on circle { fill: var(--ink); }
#th-atk.on text, #th-report.on { fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    #th-bound.on { animation: thMarch 1s linear infinite; }
    @keyframes thMarch { to { stroke-dashoffset: -20; } }
}
.th-cap { margin-top: 12px; font-family: var(--mono); font-size: .56rem; letter-spacing: .5px; color: var(--dim); line-height: 1.7; min-height: 2.6em; }
.th-cap b { color: var(--ink); font-weight: 400; }

.term pre .tl { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .bento.stg > .cell { opacity: 0; transform: translateY(14px); }
    .bento.stg.in > .cell { opacity: 1; transform: none;
        transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
    .sub-tag::after { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22,1,.36,1); }
    .sub-tag.in::after { transform: scaleX(1); }
    .term.pr .tl { opacity: 0; transform: translateY(3px); }
    .term.pr.in .tl { opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease; }
    .term.pr.in .tl:nth-child(2) { transition-delay: .2s; }
    .term.pr.in .tl:nth-child(3) { transition-delay: .42s; }
    .cell.prov .chips span { opacity: 0; transform: translateY(4px); }
    .bento.stg.in .cell.prov .chips span { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
    .cell.prov .chips span:nth-child(1) { transition-delay: .12s; }
    .cell.prov .chips span:nth-child(2) { transition-delay: .21s; }
    .cell.prov .chips span:nth-child(3) { transition-delay: .30s; }
    .cell.prov .chips span:nth-child(4) { transition-delay: .39s; }
    .cell.prov .chips span:nth-child(5) { transition-delay: .48s; }
    .cell.prov .chips span:nth-child(6) { transition-delay: .57s; }
    .cell.prov .chips span:nth-child(7) { transition-delay: .66s; }
    .cell.prov .dlog { opacity: 0; transform: translateY(3px); }
    .bento.stg.in .cell.prov .dlog { opacity: 1; transform: none; transition: opacity .45s ease .9s, transform .45s ease .9s; }
}
.dlog { margin-top: 16px; }
.dlog pre { padding: 12px 14px; margin: 0; height: 200px; overflow-y: auto; overscroll-behavior: contain;
    white-space: pre-wrap; word-break: break-word;
    scrollbar-width: thin; scrollbar-color: rgba(232,232,236,.2) transparent; }
.dlog pre::-webkit-scrollbar { width: 6px; }
.dlog pre::-webkit-scrollbar-thumb { background: rgba(232,232,236,.18); border-radius: 3px; }
.dlog .ln { display: block; }
.dlog .add { color: var(--ink); }
.dlog .deny { color: #d98b5f; }

.skx { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.skx-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: .56rem; letter-spacing: 1.5px; color: var(--dim); }
.skx-bar .path { color: var(--ink); }
.skx-bar .dots { display: flex; gap: 6px; margin-right: 2px; }
.skx-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.skx-filter { flex: 1; min-width: 60px; background: transparent; border: 0; outline: none;
    font-family: var(--mono); font-size: .62rem; color: var(--ink); letter-spacing: .5px; }
.skx-filter::placeholder { color: rgba(232,232,236,0.28); }
.skx-count { white-space: nowrap; }
.skx-count b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.skx-kbd { font-family: var(--mono); font-size: .5rem; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; line-height: 1; }
.skx .hl { color: var(--ink); background: rgba(232,232,236,0.18); border-radius: 2px; }
@media (max-width: 620px) { .skx-kbd { display: none; } }
.skx-body { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 340px; }
.skx-tree { font-family: var(--mono); font-size: .72rem; line-height: 1.95; padding: 16px 14px; color: var(--dim);
    border-right: 1px solid var(--line); overflow: auto; }
.tr-row { white-space: pre; cursor: pointer; outline: none; border-radius: 5px; padding: 1px 6px;
    transition: background .15s, color .15s; }
.tr-row .con { color: rgba(232,232,236,0.16); }
.tr-row .mk { color: var(--dim); }
.tr-row .dot { font-size: .7em; }
.tr-row .dot.prod { color: var(--ink); }
.tr-row .dot.ship { color: rgba(232,232,236,0.55); }
.tr-row .dot.exp { color: rgba(232,232,236,0.28); }
.tr-row.folder { color: var(--ink); }
.tr-row.leaf { color: rgba(232,232,236,0.5); }
.tr-row:hover, .tr-row:focus-visible { background: rgba(232,232,236,0.06); color: var(--ink); }
.tr-row.on { color: var(--ink); background: rgba(232,232,236,0.07); }
.tr-cursor { margin-top: 12px; color: var(--dim); font-size: .6rem; letter-spacing: 1px; }
.tr-empty { color: var(--dim); font-size: .62rem; padding: 8px 6px; }
.skx-detail { padding: 22px 22px; display: flex; flex-direction: column; }
.skd-crumb { font-family: var(--mono); font-size: .56rem; letter-spacing: 1.5px; color: var(--dim); }
.skd-crumb b { color: var(--ink); font-weight: 400; }
.skd-name { font-family: var(--serif); font-weight: 800; font-size: 1.35rem; margin: 12px 0 10px; letter-spacing: -.01em; }
.skd-tag { align-self: flex-start; font-family: var(--mono); font-size: .5rem; letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; margin-bottom: 16px; }
.skd-tag.prod { background: var(--ink); color: var(--void); }
.skd-tag.ship { border: 1px solid var(--ink); color: var(--ink); }
.skd-tag.exp { border: 1px solid var(--line); color: var(--dim); }
.skd-desc { font-size: .72rem; line-height: 2; color: rgba(232,232,236,0.75); }
.skd-rel { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: .56rem; letter-spacing: .5px;
    color: var(--dim); line-height: 1.9; }
.skd-rel b { color: var(--ink); font-weight: 400; }
    cursor: pointer; transition: border-color .2s, background .2s; }
.cell { transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .5s; }
.cell.hit { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 24px 70px rgba(232,232,236,.07); }
.skx-legend { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: .5rem; letter-spacing: 1.5px; color: var(--dim); }
.skx-legend i { font-style: normal; }
.skx-legend .prod { color: var(--ink); } .skx-legend .ship { color: rgba(232,232,236,0.55); } .skx-legend .exp { color: rgba(232,232,236,0.3); }
@media (prefers-reduced-motion: no-preference) {
    .tr-cursor b { color: var(--ink); font-weight: 400; animation: skblink 1.1s steps(1) infinite; }
    @keyframes skblink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
    .tr-row.anim { animation: trin .3s cubic-bezier(.22,1,.36,1) both; }
    @keyframes trin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
    .skx-detail.swap { animation: skfade .32s ease both; }
    @keyframes skfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 720px) {
    .skx-body { grid-template-columns: 1fr; }
    .skx-tree { border-right: 0; border-bottom: 1px solid var(--line); font-size: .66rem; }
    .skd-name { font-size: 1.15rem; }
}
.con-list { display: block; margin-top: 16px; }
.has-skf .con-list { display: none; }
.con-list .cl { border-bottom: 1px solid var(--line); padding: 13px 0; font-size: .62rem; color: var(--dim); line-height: 1.85; }
.con-list .cl b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: .8rem; margin-bottom: 5px; }

@media print {
    :root { --void: #fff; --ink: #111; --dim: #555; --line: #d6d6d6; --panel: #fff; }
    @page { margin: 14mm 14mm 16mm; }
    html, body { background: #fff !important; color: #111; }
    body::after, body::before, .cur, nav, .gate-back, footer.den, .spectrum, canvas,
    .pipe, .threat, .dlog, .skx, .skx-kbd { display: none !important; }
    * { animation: none !important; transition: none !important; }
    section { padding: 0 !important; }
    section#build::before { content: "Sadiq Karur  \00b7  sad7q.xyz  \00b7  Forward Deployed Engineer, Agentic AI";
        display: block; font-family: var(--mono); font-size: 9pt; letter-spacing: 1px; color: #555;
        border-bottom: 1px solid #ccc; padding-bottom: 6pt; margin-bottom: 14pt; }
    .lead { font-size: 20pt !important; margin-bottom: 14pt; }
    .lead .g { color: #111 !important; -webkit-text-stroke: 0 !important; }
    [data-reveal], [data-reveal] > *, .lead .ch, .bento.stg > .cell, .cell.prov .chips span { opacity: 1 !important; transform: none !important; }
    .has-skf .con-list, .con-list { display: block !important; }
    .bento { display: block !important; }
    .cell { border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important;
        margin-bottom: 10pt; break-inside: avoid; transform: none !important; }
    .term { background: #fff !important; border-color: #ccc !important; }
    .term-bar i { display: none; }
    .gl-c, .lr, .cert, .cl, .ev { break-inside: avoid; }
    .lr .lv.err { color: #a0522d; }
    .sub-tag { margin: 18pt 0 8pt; break-after: avoid; }
    a { color: #111; text-decoration: none; }
}

/* page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtout .3s ease both; }
::view-transition-new(root) { animation: vtin .32s ease both; }
@keyframes vtout { to { opacity: 0; } }
@keyframes vtin { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none !important; } }

/* small motion */
.cell .idx { transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s, letter-spacing .3s; }
.cell:hover .idx { transform: translateY(-2px); color: var(--ink); letter-spacing: 1px; }

@media screen and (min-width: 761px) {
    .bento.stg > .cell { padding-left: 54px; }
    .bento.stg > .cell > .idx {
        position: absolute; left: 0; top: 0; bottom: 0; width: 32px; box-sizing: border-box;
        line-height: 32px; white-space: nowrap; letter-spacing: 3px; background: rgba(232,232,236,.012);
        writing-mode: vertical-rl; transform: rotate(180deg); text-align: end; padding-bottom: 22px;
        border-left: 1px solid var(--line);
        transition: color .3s, letter-spacing .3s, border-color .3s, background .3s;
    }
    .bento.stg > .cell:hover > .idx { transform: rotate(180deg); color: var(--ink); letter-spacing: 4px;
        border-color: rgba(232,232,236,.22); background: rgba(232,232,236,.025); }
    @supports (writing-mode: sideways-lr) {
        .bento.stg > .cell > .idx { writing-mode: sideways-lr; transform: none; padding-bottom: 0; padding-top: 22px;
            border-left: 0; border-right: 1px solid var(--line); }
        .bento.stg > .cell:hover > .idx { transform: none; }
    }
    .bento.stg > .cell > .nw { margin-left: 0; }
}

.chips span { transition: transform .2s cubic-bezier(.22,1,.36,1), color .2s, border-color .2s; }
.chips span:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--ink); }

.stat-big { transition: letter-spacing .85s cubic-bezier(.22,1,.36,1), opacity .85s ease; }
.stat-big.fx-track { letter-spacing: .3em; opacity: .35; }

@media (prefers-reduced-motion: no-preference) {
    .gl-c.head::before { animation: hxPulse 2.1s ease-in-out infinite; }
    @keyframes hxPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(232,232,236,.45); opacity: 1; }
        50%      { box-shadow: 0 0 0 5px rgba(232,232,236,0); opacity: .5; } }
}

/* layout and cards */
.trace { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.trace .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, rgba(232,232,236,.12), rgba(232,232,236,.55)); }
.trace b { position: absolute; top: -4px; width: 1px; height: 9px; margin-left: -.5px; background: rgba(232,232,236,.3);
    pointer-events: auto; cursor: pointer; transition: background .3s, height .3s, top .3s; }
.trace b::before { content: ""; position: absolute; left: -7px; right: -7px; top: -6px; bottom: -6px; }
.trace b.on { background: var(--ink); top: -5px; height: 11px; }
.trace b::after { content: attr(data-l); position: absolute; top: 14px; left: 50%; transform: translate(-50%, -3px);
    font-family: var(--mono); font-size: .46rem; letter-spacing: 2px; color: var(--ink); white-space: nowrap;
    background: rgba(6,6,8,.85); padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.trace b:hover::after { opacity: 1; transform: translate(-50%, 0); }

.bento .cell::after { content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    pointer-events: none; z-index: 4; opacity: 0; transition: opacity .45s;
    background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(232,232,236,.55), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.bento .cell:hover::after { opacity: 1; }
@media (pointer: coarse) { .bento .cell::after { display: none; } }

.den-build { margin-top: 12px; font-family: var(--mono); font-size: .46rem; letter-spacing: 2px;
    color: color-mix(in oklab, var(--ink) 24%, transparent); font-variant-numeric: tabular-nums; }
.den-build button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; transition: color .3s; }
.den-build button:hover, .den-build button:focus-visible { color: var(--ink); outline: none; }
.keys { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(6,6,8,.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.keys[hidden] { display: none; }
.tracebox .ptr { width: min(780px, 94vw); max-height: 86vh; overflow: auto; background: #0a0a0e; border: 1px solid var(--line); border-radius: 12px; outline: none; margin: 0; }
.ptr-x { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono);
    font-size: .46rem; letter-spacing: 1.5px; padding: 2px 8px; cursor: pointer; text-transform: uppercase; transition: color .2s, border-color .2s; }
.ptr-x:hover, .ptr-x:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
@media (prefers-reduced-motion: no-preference) {
    .keys:not([hidden]) { animation: shFade .22s ease both; }
    .keys:not([hidden]) > * { animation: shRise .32s cubic-bezier(.22,1,.36,1) both; }
    @keyframes shFade { from { opacity: 0; } }
    @keyframes shRise { from { opacity: 0; transform: translateY(14px); } }
}

.cell h3, .sub-tag { text-wrap: balance; }
.gl-c p, .ev, .th-cap, .skd-desc, .lr .d { text-wrap: pretty; }
.term, .ev, .dr-next, .skx-count, .gl-l .h, .gl-l .y { font-variant-numeric: tabular-nums; }
.lead { letter-spacing: -0.02em; }
.cell h3 { letter-spacing: -0.005em; }

html.rmode .bento .cell canvas, html.rmode .mcpi, html.rmode .pipe, html.rmode .threat, html.rmode .inj,
html.rmode .dlog, html.rmode .dr-ctl, html.rmode .spectrum, html.rmode .skx, html.rmode .trace, html.rmode .gate-back { display: none !important; }
html.rmode .con-list { display: block !important; }
html.rmode [data-reveal], html.rmode [data-reveal] > *, html.rmode .bento.stg > .cell { opacity: 1 !important; transform: none !important; }
html.rmode .bento { grid-auto-rows: auto; }
html.rmode .bento .cell { grid-column: span 3 !important; }
html.rmode .bento .cell:hover { transform: none; }
html.rmode .bento .cell::after { display: none; }
html.rmode .lead { font-size: clamp(1.1rem, .9rem + 1.3vw, 1.7rem); margin-bottom: 20px; }
html.rmode #build::before { content: "Sadiq Karur  \00b7  sad7q.xyz  \00b7  Forward Deployed Engineer, Agentic AI";
    display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: 2px; color: var(--ink);
    border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 20px; }
@media (max-width: 1100px) { html.rmode .bento .cell { grid-column: span 2 !important; } }
html.rmode body { padding-bottom: 70px; }

.rcontact { display: none; }
html.rmode .rcontact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -8px 0 22px;
    font-family: var(--mono); font-size: .56rem; letter-spacing: 1.5px; color: var(--dim); }
html.rmode .rcontact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); letter-spacing: .5px; }
html.rmode .rcontact a:hover, html.rmode .rcontact a:focus-visible { border-color: var(--ink); outline: none; }
html.rmode .rcontact span { font-size: .5rem; }
@media print {
    .rcontact { display: flex !important; flex-wrap: wrap; gap: 4pt 10pt; margin: -8pt 0 14pt; font-family: var(--mono); font-size: 8pt; color: #555; }
    .rcontact a { color: #111; text-decoration: none; }
    .rcontact a.rmc::after { content: "  at sad7q.xyz/cipher.html"; color: #555; } }
.rbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); white-space: nowrap; z-index: 85; display: none; align-items: center;
    background: #0a0a0e; box-shadow: 0 10px 40px rgba(0,0,0,.6); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
    font-family: var(--mono); font-size: .5rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.rbar .rb { background: none; border: 0; padding: 3px 6px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim); transition: color .2s; white-space: nowrap; touch-action: manipulation; }

.rtop { display: none; }
html.rmode .rtop { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 24px; }
.rtb { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; min-height: 40px; font-family: var(--mono); font-size: .52rem;
    letter-spacing: 2px; text-transform: uppercase; color: var(--ink); cursor: pointer; touch-action: manipulation; transition: border-color .2s, color .2s; }
.rtb:hover, .rtb:focus-visible { border-color: var(--ink); outline: none; }
#rpdf2 { border-color: rgba(126,168,126,.5); color: #9cc49c; }
@media (pointer: coarse) { html.rmode .rbar { display: none !important; } }
html.rmode .rq-top, html.rmode #rq { display: none; }
@media (max-width: 620px), (pointer: coarse) { .arch-b, .arch, .arch-tr { display: none !important; } }
@media print { .rtop { display: none !important; } }
.rbar .rb:hover, .rbar .rb:focus-visible { color: var(--ink); outline: none; }
.rbar #rpdf { color: var(--ink); }
.rbar .rb-s { color: rgba(232,232,236,.25); margin: 0 4px; }
html.rmode .rbar { display: inline-flex; }

#build { padding-bottom: 36px; }
.gate-back { padding: 0 0 18px; }
footer.den { padding: 20px 32px 30px; }
footer.den .sig { margin-top: 10px; }
@media (max-width: 760px) { #build { padding-bottom: 28px; } footer.den { padding: 14px 0 22px; } }

.tagrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; }
.tagrow .tag { margin-bottom: 0; }
.rq-top { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-family: var(--mono); font-size: .5rem; letter-spacing: 2px;
    color: var(--dim); cursor: pointer; transition: color .2s, border-color .2s; }
.rq-top:hover, .rq-top:focus-visible, .rq-top[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); outline: none; }
.rcontact .rms { font-size: .5rem; color: var(--dim); }

.imp { display: block; margin-top: 3px; color: #7ea87e; letter-spacing: .5px; }
.imp:empty { display: none; }
.imp::before { content: "outcome  "; color: var(--dim); letter-spacing: 2px; }

.arch-b { margin-left: 8px; background: none; border: 1px solid transparent; border-radius: 999px; padding: 0 7px; font-family: var(--mono); font-size: .46rem;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); cursor: pointer; opacity: 0; vertical-align: 1px; transition: opacity .25s, color .2s, border-color .2s; }
.ev:hover .arch-b, .poc-t tr:hover .arch-b, .arch-b:focus-visible, .arch-b.on { opacity: 1; }
.arch-b:hover, .arch-b:focus-visible, .arch-b.on { color: var(--ink); border-color: var(--line); outline: none; }
@media (hover: none) { .arch-b { opacity: .45; } }
.arch { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,6,8,.55); padding: 10px 12px 8px; }
.arch-w { overflow-x: auto; }
.archsvg { display: block; width: 100%; min-width: 520px; height: auto; color: rgba(232,232,236,.4); }
.archsvg text { font-family: var(--mono); font-size: 9.5px; fill: var(--dim); text-anchor: middle; letter-spacing: .2px; }
.archsvg .an rect { fill: #0c0c12; stroke: var(--line); stroke-width: 1.1; transition: stroke .35s, fill .35s; }
.archsvg .an.k-ag rect { stroke: rgba(232,232,236,.45); }
.archsvg .an.k-gate rect { stroke: #7ea87e; stroke-dasharray: 3 3; }
.archsvg .an.k-gate text { fill: #9cc49c; }
.archsvg .an.hot rect { stroke: var(--ink); fill: rgba(232,232,236,.08); }
.archsvg .an.hot text { fill: var(--ink); }
.archsvg .an.hold rect { animation: aHold .5s ease-in-out infinite alternate; }
@keyframes aHold { from { stroke: #7ea87e; fill: #0c0c12; } to { stroke: #c4e6c4; fill: rgba(126,168,126,.16); } }
.archsvg .ae { fill: none; stroke: rgba(232,232,236,.3); stroke-width: 1.1; }
.archsvg .ae.ad { stroke-dasharray: 3 4; }
.archsvg .ae.ax { stroke: rgba(217,139,95,.55); stroke-dasharray: 2 4; }
.archsvg .axm { fill: #d98b5f; font-size: 11px; }
.archsvg .ab { fill: none; stroke: rgba(126,168,126,.35); stroke-dasharray: 5 5; }
.archsvg .abl { text-anchor: start; font-size: 8px; letter-spacing: 2px; fill: rgba(126,168,126,.75); }
.archsvg .ap { fill: var(--ink); filter: drop-shadow(0 0 3px rgba(232,232,236,.85)); }
.archsvg .ae.live { stroke: rgba(232,232,236,.85); stroke-dasharray: 5 4; animation: aflow .45s linear infinite; }
@keyframes aflow { to { stroke-dashoffset: -9; } }
.archsvg .el { font-size: 7.5px; fill: rgba(126,168,126,.75); letter-spacing: .3px; }
.archsvg .an.busy rect { stroke-dasharray: 4 3; animation: aants .45s linear infinite; }
@keyframes aants { to { stroke-dashoffset: -7; } }
.archsvg .an.deny rect { stroke: #d98b5f; fill: rgba(217,139,95,.14); }
.archsvg .an.deny text { fill: #d98b5f; }
.archsvg .apt { fill: var(--ink); }
.arch-log { margin: 8px 0 0; padding: 6px 8px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: .48rem; letter-spacing: .4px; line-height: 1.75;
    color: var(--dim); min-height: 7em; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.arch-log .s { color: rgba(232,232,236,.28); }
.arch-log .g { color: #7ea87e; }
.arch-log .r { color: #d98b5f; }
@media (prefers-reduced-motion: reduce) { .arch-log { display: none; } }
.arch-c { margin: 6px 0 0; font-family: var(--mono); font-size: .5rem; letter-spacing: .5px; line-height: 1.6; color: var(--dim); }
.poc-t tr.arch-tr td { padding: 0 0 8px; border-bottom: 0; }

.poc-t tr.arch-tr .arch { width: 0; min-width: 100%; box-sizing: border-box; }
@media (max-width: 620px) { .poc-t tr.arch-tr { display: block; } .poc-t tr.arch-tr td { display: block; } }
html.rmode .arch-b, html.rmode .arch, html.rmode .arch-tr { display: none !important; }
@media print { .rq-top, .arch-b, .arch, .arch-tr { display: none !important; } }

#build .lead, #build .cell h3 { text-shadow: 0 calc(var(--gy, 0) * 1px) 0 rgba(232,232,236,.14), 0 calc(var(--gy, 0) * 2px) 0 rgba(232,232,236,.07), 0 calc(var(--gy, 0) * 3px) 0 rgba(232,232,236,.035); }
#build .lead .g { text-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
    #build .lead:hover { animation: rgbSplit .5s steps(5) 1; }
    @keyframes rgbSplit {
        0%   { text-shadow: -2px 0 rgba(255,70,80,.55), 2px 0 rgba(70,200,255,.55); transform: translateX(1px); }
        40%  { text-shadow: 1.5px 0 rgba(255,70,80,.45), -1.5px 0 rgba(70,200,255,.45); transform: translateX(-1px); }
        80%  { text-shadow: -.5px 0 rgba(255,70,80,.3), .5px 0 rgba(70,200,255,.3); transform: none; }
        100% { text-shadow: none; transform: none; }
    }
}
@media print { #build .lead, #build .cell h3 { text-shadow: none !important; } }

.chips { gap: 0; row-gap: 4px; }
.chips span { border: 0; border-radius: 0; padding: 0; font-size: .58rem; letter-spacing: .3px; color: var(--dim); }
.chips span:not(:last-child)::after { content: "/"; margin: 0 .6em; color: rgba(232,232,236,.2); }
.chips span:hover { transform: none; color: var(--ink); }
.th-chips span { cursor: help; text-decoration: underline dotted rgba(232,232,236,.28); text-underline-offset: 4px; }
.sub-tag { letter-spacing: 1.5px; text-transform: none; }

@media print { .trace, .keys, .den-build, .rbar { display: none !important; } .bento .cell::after { display: none !important; } }

/* injection test */
.inj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .inj { grid-template-columns: 1fr; } }
.inj-in, .inj-out { border: 1px solid var(--line); border-radius: 10px; background: rgba(6,6,8,.5); font-family: var(--mono); min-width: 0; }
.inj-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
    border-bottom: 1px solid var(--line); font-size: .5rem; letter-spacing: 1.5px; color: var(--dim); }
.inj-pre { display: flex; gap: 6px; flex-wrap: wrap; }
.inj-bar button, .inj-run { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono);
    font-size: .46rem; letter-spacing: 1.5px; padding: 3px 9px; cursor: pointer; text-transform: uppercase; transition: color .2s, border-color .2s; }
.inj-bar button:hover, .inj-bar button:focus-visible, .inj-bar button.on { color: var(--ink); border-color: var(--ink); outline: none; }
.inj textarea { display: block; width: 100%; min-height: 150px; resize: vertical; background: transparent; border: 0; color: var(--ink);
    font-family: var(--mono); font-size: .58rem; line-height: 1.8; padding: 12px; outline: none; box-sizing: border-box; }
.inj-run { margin: 0 12px 12px; color: #d98b5f; border-color: rgba(217,139,95,.45); }
.inj-run:hover, .inj-run:focus-visible { color: #d98b5f; border-color: #d98b5f; background: rgba(217,139,95,.06); outline: none; }
.inj-out { padding: 12px 14px; font-size: .56rem; line-height: 1.9; color: var(--dim); }
.inj-out .ag { margin-bottom: 8px; overflow-wrap: anywhere; }
.inj-l { display: grid; grid-template-columns: 1rem 7rem 3.4rem 1fr; gap: 8px; align-items: baseline; }
.inj-l .k { color: var(--ink); }
.inj-l .st { letter-spacing: 1.5px; }
.inj-l .st.pass { color: #7ea87e; }
.inj-l .st.bad { color: #d98b5f; }
.inj-l .why { color: var(--ink); overflow-wrap: anywhere; }
.inj-res { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink); }

.llm-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 22px; font-family: var(--mono); font-size: .52rem; letter-spacing: .5px; color: var(--dim); }
.llm-load { background: none; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-family: var(--mono); font-size: .5rem;
    letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; cursor: pointer; transition: background .2s; }
.llm-load:hover, .llm-load:focus-visible { background: rgba(232,232,236,.08); outline: none; }
.llm-bar { position: relative; width: 120px; height: 3px; background: rgba(232,232,236,.12); border-radius: 2px; overflow: hidden; }
.llm-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width .3s ease; }
.llm-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.llm-dot.on { background: #7ea87e; box-shadow: 0 0 6px rgba(126,168,126,.6); }
.llm-dot.off { background: rgba(232,232,236,.25); }
.llm-dot.err { background: #d98b5f; }
.llm-n { overflow-wrap: anywhere; }
.llm-alt { background: none; border: 0; padding: 0; color: var(--dim); font-family: var(--mono); font-size: .5rem; letter-spacing: .5px; cursor: pointer; text-align: left;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: color .2s; }
.llm-alt:hover, .llm-alt:focus-visible { color: var(--ink); outline: none; }

.lab { margin-top: 10px; font-family: var(--mono); }
.lab-note { margin: 16px 0 2px; font-family: var(--mono); font-size: .5rem; letter-spacing: .5px; line-height: 1.8; color: var(--dim); }
.lab-note b { color: #7ea87e; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; font-size: .46rem; }
html.rmode .lab-note { display: none; }
@media print { .lab-note { display: none !important; } }
.lab summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px; font-size: .54rem; letter-spacing: 1px; color: var(--ink); }
.lab summary::-webkit-details-marker { display: none; }
.lab summary::after { content: "\25b8"; font-size: .6rem; color: var(--dim); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.lab[open] summary::after { transform: rotate(90deg); }
.lab summary:hover .lab-k, .lab summary:focus-visible .lab-k { border-color: var(--ink); }
.lab summary:focus-visible { outline: none; }
.lab-k { font-size: .46rem; letter-spacing: 2px; text-transform: uppercase; color: #7ea87e; border: 1px solid rgba(126,168,126,.45); border-radius: 999px; padding: 1px 7px; transition: border-color .2s; }
.lab-m { color: var(--dim); font-size: .5rem; }
.lab-b { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,6,8,.5); }
.lab-in, .lab-q input { width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: var(--mono);
    font-size: .56rem; line-height: 1.8; padding: 8px 10px; outline: none; transition: border-color .2s; }
.lab-in { min-height: 120px; resize: vertical; }
.lab-in:focus, .lab-q input:focus { border-color: rgba(232,232,236,.4); }
.lab-q { display: flex; gap: 8px; }
.lab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lab-run { background: none; border: 1px solid rgba(126,168,126,.5); border-radius: 999px; color: #7ea87e; font-family: var(--mono); font-size: .5rem;
    letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 13px; cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s; }
.lab-run:hover, .lab-run:focus-visible { border-color: #7ea87e; background: rgba(126,168,126,.07); outline: none; }
.lab-run:disabled { opacity: .4; cursor: default; }
.lab-st { font-size: .5rem; letter-spacing: .5px; color: var(--dim); }
.lab-pre { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-pre button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: .48rem;
    letter-spacing: .5px; padding: 3px 10px; cursor: pointer; transition: color .2s, border-color .2s; }
.lab-pre button:hover, .lab-pre button:focus-visible, .lab-pre button.on { color: var(--ink); border-color: var(--ink); outline: none; }
.lab-log { margin: 0; max-height: 210px; overflow: auto; font-size: .5rem; line-height: 1.75; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.lab-log .hit { color: var(--ink); background: rgba(217,139,95,.14); }
.lab-schema { font-size: .5rem; color: var(--dim); overflow-wrap: anywhere; }
.lab-out { font-size: .54rem; line-height: 1.85; color: var(--dim); overflow-wrap: anywhere; }
.lab-out:empty { display: none; }
.lab-out b { color: var(--ink); font-weight: 400; }
.lab-out .ok { color: #7ea87e; } .lab-out .rv { color: #d98b5f; }
.lab-out table { width: 100%; border-collapse: collapse; }
.lab-out td, .lab-out th { text-align: left; font-weight: 400; padding: 3px 12px 3px 0; border-bottom: 1px solid rgba(232,232,236,.06); vertical-align: top; }
.lab-out th { color: var(--dim); letter-spacing: 1px; }
.lab-out td { color: var(--ink); }
.lab-out pre { margin: 0; white-space: pre-wrap; color: var(--ink); }
.lab-out .src { display: block; margin-top: 4px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--dim); }
.lab-out .act { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lab-pm { white-space: pre-wrap; color: var(--ink); }
.lab-out .stp { display: block; color: var(--dim); }
.lab-out .gr { display: block; margin-top: 4px; }
.lab-out .stp + b { display: block; margin-top: 8px; }
.lab-out .stp i { font-style: normal; color: var(--ink); }
.ag-tr { border-top: 1px solid var(--line); padding-top: 10px; font-size: .5rem; }
.ag-tr[hidden] { display: none; }
.ag-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dim); letter-spacing: .5px; margin-bottom: 6px; }
.ag-dl { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: .46rem; padding: 3px 10px; cursor: pointer; }
.ag-dl:hover, .ag-dl:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.ag-dl:disabled { opacity: .4; cursor: default; }
.ag-r { display: grid; grid-template-columns: minmax(0, 15em) 1fr 4.2em; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 4px;
    padding: 3px 4px; color: var(--dim); font: inherit; text-align: left; cursor: pointer; }
.ag-r:hover, .ag-r:focus-visible, .ag-r.on { background: rgba(232,232,236,.05); color: var(--ink); outline: none; }
.ag-r .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-r.d1 .n { padding-left: 1.4em; }
.ag-r .b { position: relative; height: 7px; }
.ag-r .b i { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 2px; background: rgba(232,232,236,.35); }
.ag-r.chat .b i { background: rgba(232,232,236,.7); }
.ag-r.tool .b i { background: #7ea87e; }
.ag-r.err .b i { background: #d98b5f; }
.ag-r.live .b i { animation: agp 1s ease-in-out infinite; }
@keyframes agp { 50% { opacity: .45; } }
.ag-r .t { text-align: right; font-variant-numeric: tabular-nums; }
.ag-at { margin: 8px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim); line-height: 1.7; }
.ag-at b { color: var(--ink); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .ag-r.live .b i { animation: none; } }
@media print { .ag-tr { display: none !important; } }

.xr { font-size: .62rem; line-height: 2.1; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.xr i { font-style: normal; cursor: pointer; border-radius: 3px; }
.xr i.lo { text-decoration: underline dotted rgba(232,232,236,.55); text-underline-offset: 4px; }
.xr i.f { box-shadow: inset 0 0 0 1px rgba(232,232,236,.55); }
.xr i:hover, .xr i:focus-visible, .xr i.sel { background: rgba(232,232,236,.12); outline: none; }
.xr-alt { display: grid; gap: 4px; font-size: .5rem; line-height: 1.4; }
.xr-alt:empty { display: none; }
.xr-alt .h { color: var(--dim); letter-spacing: .5px; }
.xr-alt button { display: grid; grid-template-columns: minmax(5em, 9em) 1fr auto auto; align-items: center; gap: 12px; background: none; border: 1px solid var(--line);
    border-radius: 6px; color: var(--ink); font: inherit; padding: 5px 10px; text-align: left; cursor: pointer; }
.xr-alt button:hover, .xr-alt button:focus-visible { border-color: rgba(232,232,236,.5); outline: none; }
.xr-alt button:disabled { cursor: default; border-style: dashed; }
.xr-alt .t { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.xr-alt .bar { height: 3px; background: rgba(232,232,236,.1); border-radius: 2px; overflow: hidden; }
.xr-alt .bar b { display: block; height: 100%; background: var(--ink); }
.xr-alt .p, .xr-alt .a { text-align: right; color: var(--dim); white-space: nowrap; }
.xr-alt .p { min-width: 3.4em; }
.xr-tabs button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-hud { font-size: .48rem; letter-spacing: .4px; color: var(--dim); }
@media (max-width: 620px) { .xr-alt button { grid-template-columns: minmax(4em, 7em) 1fr auto auto; gap: 8px; } }
.dlog.explain .ln { cursor: help; }
.dlog.explain .ln:hover { background: rgba(232,232,236,.05); }
.dlog .ln.pick { background: rgba(126,168,126,.12); }
.pipe.live .pn rect, .pipe.live .pn text, .pipe.live .pdot, .pipe.live .pglow { animation: none !important; }
.pipe.live .pdot, .pipe.live .pglow { opacity: 0; }
.pipe.live .pn rect { stroke: var(--line); }
.pipe.live .pn text { fill: rgba(232,232,236,.35); }
.pipe.live .pn.hot rect { stroke: #7ea87e; fill: rgba(126,168,126,.08); }
.pipe.live .pn.hot text { fill: var(--ink); }
.pipe.live .pn.skip text { text-decoration: line-through; }
.inj-llm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--mono); font-size: .52rem; color: var(--ink); }
.inj-llm .llm-gate { flex: 1; min-width: 200px; }
html.rmode .lab, html.rmode .inj-llm { display: none !important; }
@media print { .lab, .inj-llm { display: none !important; } }
@media (max-width: 620px) { .lab-q { flex-direction: column; } }

@media (prefers-reduced-motion: no-preference) {
    .inj-l, .inj-res { opacity: 0; transform: translateY(3px); transition: opacity .25s ease, transform .25s ease; }
    .inj-l.in, .inj-res.in { opacity: 1; transform: none; }
}
@media (max-width: 560px) { .inj-l { grid-template-columns: .9rem minmax(0, 1fr) auto; gap: 2px 8px; margin-bottom: 6px; } .inj-l .why { grid-column: 2 / -1; } }
@media print { .inj { display: none !important; } }

/* page.trace */
.ptr-body { padding: 16px 18px 18px; font-family: var(--mono); font-size: .58rem; line-height: 1.8; color: var(--dim); }
.ptr-meta { overflow-wrap: anywhere; }
.ptr-meta b { color: var(--ink); font-weight: 400; }
.ptr-h { margin: 16px 0 6px; color: var(--ink); letter-spacing: 2px; text-transform: uppercase; font-size: .5rem; }
.ptr-h span { color: var(--dim); letter-spacing: 1px; text-transform: none; margin-left: 8px; }
.ptr-r { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 8.5rem; gap: 12px; align-items: center; padding: 2px 0; }
.ptr-r .n { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptr-r .n i { font-style: normal; color: var(--dim); }
.ptr-r .tk { position: relative; height: 6px; background: rgba(232,232,236,.04); border-radius: 3px; overflow: hidden; }
.ptr-r .tk i { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 3px; background: rgba(232,232,236,.5); transform-origin: left; }
.ptr-r .tk i.live { background: #7ea87e; }
.ptr-r .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptr-marks { margin-top: 10px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ptr-seen { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); overflow-wrap: anywhere; }
.ptr-seen b { color: #7ea87e; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
    .ptr-r .tk i { transform: scaleX(0); transition: transform .7s cubic-bezier(.22,1,.36,1); }
    .ptr.run .ptr-r .tk i { transform: scaleX(1); }
}
@media (max-width: 560px) { .ptr-r { grid-template-columns: 6.6rem 1fr 6.4rem; gap: 8px; } .ptr-body { padding: 14px 12px; } }

.nw { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: .42rem; letter-spacing: 2px; text-transform: uppercase;
    color: #7ea87e; border: 1px solid rgba(126,168,126,.45); border-radius: 999px; padding: 0 6px; line-height: 1.7; vertical-align: middle; }
.trace b.nwt { background: #7ea87e; }

.hare.asleep { overflow: visible; }
.hare.asleep .earL, .hare.asleep .earR { transform-box: fill-box; transform-origin: 50% 92%; animation: none !important; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.hare.asleep .earL { transform: rotate(-40deg) !important; }
.hare.asleep .earR { transform: rotate(40deg) !important; }
.hare.asleep .eye { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(.16) !important; animation: none !important; }
@media print { .tracebox, .nw { display: none !important; } }

/* styles */
::highlight(lf) { color: transparent; }
#build .lead.lf-on { text-shadow: none !important; }
.lf { position: fixed; z-index: 5; display: none; pointer-events: none; text-align: center; white-space: pre;
    font-family: var(--mono); font-weight: 700; color: var(--ink); }
@media print { .lf { display: none !important; } }

@media (max-width: 620px) {
    .ev, .poc-t td { font-size: .64rem; letter-spacing: .3px; line-height: 1.75; }
    .lab summary, .poc summary { font-size: .62rem; padding: 9px 0; }
    .lab-k { font-size: .5rem; }
    .lab-m, .lab-st, .llm-gate .llm-n, .xr-hud { font-size: .56rem; }
    .lab-out { font-size: .6rem; }
    .lab-run, .lab-pre button, .llm-load, .llm-alt, .rq-top, .xr-alt button { font-size: .58rem; min-height: 34px; }
    .lab-pre button, .rq-top { padding-left: 12px; padding-right: 12px; }
    .den-build { font-size: .52rem; }
    .ag-tr, .ag-at { font-size: .56rem; }
    .ag-r { grid-template-columns: minmax(0, 9.5em) 1fr 3.8em; min-height: 32px; }
    .ag-dl { font-size: .56rem; min-height: 34px; padding: 0 12px; }

    .lab summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; width: 100%; }
    .lab summary .lab-m { grid-column: 2; grid-row: 2; }
    .lab summary::after { grid-column: 3; grid-row: 1; }

    .pipe text { font-size: 17px; letter-spacing: 0; }
    .pipe .pl { font-size: 13px; letter-spacing: 1px; }
    .th-svg text { font-size: 18px; letter-spacing: 0; }
    .th-svg .th-lbl { font-size: 16px; }
    #th-report { text-anchor: middle; transform: translate(-22px, 23px); }

    .skx-count .skc-more, .tr-cursor { display: none; }
    .skx-detail.idle { display: none; }
    .skx-body { min-height: 0; }
    .den-build { padding: 0 14px; letter-spacing: 1.2px; line-height: 2; }
}

@media (hover: none) { .lr:hover, .dlog.explain .ln:hover { background: transparent; } }