/* ============================================================ ThinHarness — shared site theme (Direction B · "Terminal") Cool blue-grey · monospace-forward · forest-green accent ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap'); :root{ --bg:#eceff2; --panel:#ffffff; --panel-2:#f5f7f9; --ink:#19222b; --ink-soft:#3a4650; --muted:#69757f; --line:#d5dde3; --line-2:#e3e9ed; --green:#1f7a4d; --green-bright:#16924f; --green-deep:#185f3c; --green-wash:#e4f0e9; --green-line:#c4ddcd; --term-bg:#16201b; --term-ink:#d6e6d8; --amber:#946a14; --amber-wash:#f6efda; --red:#9d3a35; --red-wash:#f6e6e4; --radius:10px; --sans:"Inter Tight",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---- grid background, applied to ---- */ .th{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; background-image: linear-gradient(var(--line-2) 1px,transparent 1px), linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:64px 64px; background-position:center top; } .th *{box-sizing:border-box;} /* ============================================================ Shared header / nav ============================================================ */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(236,239,242,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-header__inner{ max-width:1180px;margin:0 auto;padding:13px 28px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .site-logo{display:inline-flex;align-items:center;line-height:0;} .site-logo img{height:28px;display:block;} .site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .site-nav a{ font-family:var(--mono);font-size:13px;color:var(--ink-soft); text-decoration:none;padding:6px 11px;border-radius:7px; border:1px solid transparent;white-space:nowrap;transition:all .14s ease; } .site-nav a:hover{color:var(--green-deep);border-color:var(--line);background:var(--panel);} .site-nav a.is-active{color:var(--green-deep);background:var(--green-wash);border-color:var(--green-line);} .site-nav a.ext{color:var(--muted);} .site-nav a.ext:hover{color:var(--green-deep);} /* ============================================================ Shared footer ============================================================ */ .site-footer{ border-top:1px solid var(--line); margin-top:8px; } .site-footer__inner{ max-width:1180px;margin:0 auto;padding:26px 28px 56px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; font-family:var(--mono);font-size:12.5px;color:var(--muted); } .site-footer__inner a{color:var(--muted);text-decoration:none;} .site-footer__inner a:hover{color:var(--green-deep);} .site-footer .links{display:flex;gap:18px;flex-wrap:wrap;} .site-footer .mono-mark{display:flex;align-items:center;gap:10px;} .site-footer .mono-mark .dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);} @media(max-width:640px){ .site-header__inner{flex-direction:column;align-items:flex-start;gap:12px;} .site-nav{gap:2px;} .site-nav a{padding:5px 8px;font-size:12px;} } /* ============================================================ Home page ============================================================ */ body.page-home { font-size:16px; } body.page-home .wrap a { color:var(--green);text-decoration:none; } body.page-home .wrap { max-width:1180px;margin:0 auto;padding:0 28px; } /* hero */ body.page-home .hero { padding:72px 0 44px;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center; } body.page-home .badge { display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px; color:var(--green-deep);background:var(--green-wash);border:1px solid var(--green-line); border-radius:999px;padding:4px 12px;margin-bottom:22px;white-space:nowrap; } body.page-home .badge .dot { width:7px;height:7px;border-radius:50%;background:var(--green-bright); } body.page-home .badge a { color:var(--green-deep);text-decoration:none; } body.page-home .badge a:hover { text-decoration:underline; } body.page-home .badge .badge-icon-link { display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;vertical-align:-3px; } body.page-home .badge .badge-icon-link:hover { text-decoration:none; } body.page-home .badge .badge-icon-link img { width:16px;height:16px;display:block;opacity:.86; } body.page-home .badge .badge-icon-link:hover img { opacity:1; } body.page-home h1.tagline { font-size:46px;line-height:1.08;letter-spacing:-0.028em;font-weight:700;margin:0 0 20px; } body.page-home .tagline .hl { color:var(--green); } body.page-home .lede { color:var(--ink-soft);font-size:18px;max-width:480px;margin:0 0 26px; } body.page-home .hero-cta { display:flex;gap:10px 20px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:13.5px; } body.page-home .hero-cta a { color:var(--green-deep);white-space:nowrap; } body.page-home .hero-cta .arrow { transition:transform .15s;display:inline-block; } body.page-home .hero-cta a:hover .arrow { transform:translateX(3px); } /* terminal block */ body.page-home .term { background:var(--term-bg);border-radius:12px;overflow:hidden; box-shadow:0 24px 50px rgba(20,30,24,.20);border:1px solid #0e1612; } body.page-home .term .bar { display:flex;align-items:center;gap:7px;padding:12px 15px;background:#1c2a22;border-bottom:1px solid #0e1612; } body.page-home .term .bar i { width:11px;height:11px;border-radius:50%;display:block;background:#33473b; } body.page-home .term .bar .t { margin-left:8px;font-family:var(--mono);font-size:11.5px;color:#7f9a8a; } body.page-home .term .body { padding:20px;font-family:var(--mono);font-size:14px;line-height:1.95;color:var(--term-ink); } body.page-home .term .body .c { color:#5f8c72; } body.page-home .term .body .p { color:#5a7d68; } body.page-home .term .body .g { color:#7fd39a; } body.page-home .term .body .w { color:#e9f3eb; } body.page-home .term .body .copy { float:right;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase; color:#6f8c7b;cursor:pointer;border:1px solid #2c4034;border-radius:5px;padding:2px 7px; } body.page-home .term .body .copy:hover { color:#aee7c0;border-color:#3f5b49; } body.page-home .band { display:grid;grid-template-columns:repeat(3,1fr);background:var(--panel); border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:14px; } body.page-home .band .cell { padding:16px 20px;border-right:1px solid var(--line-2); } body.page-home .band .cell:last-child { border-right:0; } body.page-home .band .cell .k { font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted); } body.page-home .band .cell .v { font-family:var(--mono);font-size:25px;font-weight:600;margin-top:5px;color:var(--ink); } body.page-home .band .cell .v span { color:var(--green); } /* section heads */ body.page-home .sechead { display:flex;align-items:baseline;gap:14px;margin-bottom:26px; } body.page-home .sechead .num { font-family:var(--mono);font-size:13px;color:var(--green); } body.page-home .sechead h2 { font-size:25px;font-weight:700;letter-spacing:-0.02em;margin:0; } body.page-home .sechead .rule { flex:1;height:1px;background:var(--line); } body.page-home .sechead .meta { font-family:var(--mono);font-size:12px;color:var(--muted); } /* opinions */ body.page-home .opinions { padding:60px 0 18px; } body.page-home .oplist { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden; } body.page-home .op { background:var(--panel);padding:22px 24px;transition:background .14s; } body.page-home .op:hover { background:var(--panel-2); } body.page-home .op .tag { font-family:var(--mono);font-size:12px;color:var(--green); } body.page-home .op h3 { font-size:17px;font-weight:600;margin:9px 0 6px;letter-spacing:-0.01em; } body.page-home .op p { margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.5; } /* explore */ body.page-home .explore { padding:58px 0 30px; } body.page-home .xrow { display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px; } body.page-home .x { display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:22px;transition:border-color .15s,transform .15s,box-shadow .15s; } body.page-home .x:hover { border-color:var(--green);transform:translateY(-3px);box-shadow:0 16px 32px rgba(25,34,43,.07); } body.page-home .x .path { font-family:var(--mono);font-size:12px;color:var(--muted); } body.page-home .x h4 { font-size:19px;font-weight:600;margin:11px 0 7px;color:var(--ink);letter-spacing:-0.01em; } body.page-home .x p { margin:0 0 16px;color:var(--muted);font-size:14.5px;flex:1; } body.page-home .x .go { font-family:var(--mono);font-size:13px;color:var(--green-deep); } @media(max-width:880px) { body.page-home .hero { grid-template-columns:1fr;gap:30px; } body.page-home .oplist, body.page-home .xrow { grid-template-columns:1fr; } body.page-home h1.tagline { font-size:38px; } } /* ============================================================ About page ============================================================ */ body.page-about { font-size:16px; } body.page-about .wrap a { color:var(--green);text-decoration:none; } body.page-about .wrap a:hover { text-decoration:underline; } body.page-about .wrap { max-width:1080px;margin:0 auto;padding:0 28px; } body.page-about .doc { max-width:860px;margin:0 auto; } /* hero */ body.page-about .doc-hero { padding:64px 0 30px;text-align:center; } body.page-about .doc-hero .bigmark { height:46px;margin-bottom:26px; } body.page-about .doc-hero .tag { font-size:21px;color:var(--ink-soft);max-width:560px;margin:0 auto;line-height:1.5; } body.page-about .doc-hero .tag b { color:var(--ink);font-weight:600; } body.page-about .badges { display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:24px; } body.page-about .badges a { display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px; color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 11px;text-decoration:none;white-space:nowrap; } body.page-about .badges a:hover { border-color:var(--green-line);color:var(--green-deep); } body.page-about .badges .b-dot { width:7px;height:7px;border-radius:50%; } body.page-about .badges .ci .b-dot { background:var(--green-bright); } body.page-about .badges .lic .b-dot { background:#3b76c4; } body.page-about .badges .pypi .b-dot { background:var(--amber); } /* on-page nav */ body.page-about .toc { display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:30px 0 8px; padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } body.page-about .toc a { font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:4px 9px;border-radius:6px;text-decoration:none; } body.page-about .toc a:hover { color:var(--green-deep);background:var(--green-wash); } /* sections */ body.page-about section { padding:46px 0 6px;scroll-margin-top:80px; } body.page-about .eyebrow { font-family:var(--mono);font-size:12.5px;color:var(--green);letter-spacing:.04em;margin-bottom:8px; } body.page-about h2 { font-size:28px;font-weight:700;letter-spacing:-0.025em;margin:0 0 18px; } body.page-about h3 { font-size:18px;font-weight:600;margin:0 0 8px;letter-spacing:-0.01em; } body.page-about p { margin:0 0 16px;color:var(--ink-soft);font-size:16px;line-height:1.66; } body.page-about .doc strong { color:var(--ink); } body.page-about code { font-family:var(--mono);font-size:.88em;background:var(--panel-2);border:1px solid var(--line-2); border-radius:5px;padding:1px 5px;color:var(--green-deep); } /* terminal / code blocks */ body.page-about pre { margin:0 0 16px;background:var(--term-bg);border-radius:12px;border:1px solid #0e1612; padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:var(--term-ink); box-shadow:0 16px 36px rgba(20,30,24,.14); } body.page-about pre code { background:none;border:0;padding:0;color:inherit;font-size:inherit; } body.page-about pre .c { color:#5f8c72; } body.page-about pre .k { color:#8fd0a6; } body.page-about pre .s { color:#cfe6d4; } body.page-about pre .p { color:#5a7d68; } body.page-about .install-line { display:flex;align-items:center;gap:14px;background:var(--term-bg);color:#e9f3eb; border-radius:11px;padding:15px 20px;font-family:var(--mono);font-size:15px;margin-bottom:10px; border:1px solid #0e1612; } body.page-about .install-line .p { color:#5a7d68; } body.page-about .install-line .c { color:#5f8c72; } body.page-about .req { font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:0; } /* comparison table */ body.page-about .table-note { font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 14px; } body.page-about .table-wrap { border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel); margin-bottom:14px;overflow-x:auto; } body.page-about table.loc { width:100%;border-collapse:collapse;font-size:14px;min-width:760px; } body.page-about table.loc th, body.page-about table.loc td { padding:11px 12px;text-align:center;border-bottom:1px solid var(--line-2); } body.page-about table.loc thead th { background:var(--panel-2);font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line); vertical-align:bottom; } body.page-about table.loc th.lib, body.page-about table.loc td.lib { text-align:left; } body.page-about table.loc td.lib { font-weight:500;color:var(--ink); } body.page-about table.loc td.loc-n { font-family:var(--mono);font-weight:600;color:var(--ink);text-align:right; } body.page-about table.loc tbody tr:last-child td { border-bottom:0; } body.page-about table.loc tbody tr:hover { background:var(--panel-2); } body.page-about table.loc tr.me { background:var(--green-wash)!important; } body.page-about table.loc tr.me td { border-bottom-color:var(--green-line); } body.page-about table.loc tr.me td.lib { color:var(--green-deep);font-weight:700; } body.page-about table.loc tr.me td.loc-n { color:var(--green-deep); } body.page-about .lib-cell { display:flex;align-items:center;gap:9px; } body.page-about .lib-cell img { width:18px;height:18px;opacity:.85;flex:none; } body.page-about .lib-cell img.thinharness-table-logo { width:auto;height:13px; } body.page-about .lib-cell sup { color:var(--muted);font-size:10px; } body.page-about .mark { font-family:var(--mono);font-size:15px;line-height:1; } body.page-about .mark.y { color:var(--green-bright); } body.page-about .mark.n { color:#c2ccd3; } body.page-about .mark.p { color:var(--amber); } body.page-about tr.me .mark.y { color:var(--green-deep); } body.page-about .legend { display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:18px; } body.page-about .legend span { display:inline-flex;align-items:center;gap:6px; } body.page-about .footnotes { font-size:13px;color:var(--muted);line-height:1.6;border-left:2px solid var(--line);padding-left:16px; } body.page-about .footnotes p { font-size:13px;color:var(--muted);margin:0 0 8px; } /* opinions */ body.page-about .op-list { display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden; } body.page-about .op-item { background:var(--panel);padding:22px 24px; } body.page-about .op-item .tag { font-family:var(--mono);font-size:12px;color:var(--green); } body.page-about .op-item h3 { margin:8px 0 7px; } body.page-about .op-item p { margin:0;font-size:15px; } /* features */ body.page-about .feat { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden; } body.page-about .feat .f { background:var(--panel);padding:18px 20px; } body.page-about .feat .f .ft { font-family:var(--mono);font-size:13px;color:var(--green-deep);font-weight:600;margin-bottom:5px; } body.page-about .feat .f p { margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55; } body.page-about .callout { background:var(--amber-wash);border:1px solid #e7d6a8;border-radius:10px;padding:16px 18px;margin-bottom:16px; } body.page-about .callout p { margin:0;font-size:14.5px;color:#5e4a18; } body.page-about .source-link { font-family:var(--mono);font-size:13px;color:var(--muted); } body.page-about .table-note-summary { margin-bottom:18px; } body.page-about .source-note { margin-top:16px; } @media(max-width:760px) { body.page-about .feat { grid-template-columns:1fr; } body.page-about h2 { font-size:24px; } } /* ============================================================ Explainer page ============================================================ */ :root { --bg: #eceff2; --paper: #ffffff; --ink: #19222b; --muted: #69757f; --line: #d5dde3; --soft: #e3e9ed; --blue: #1f7a4d; --green: #185f3c; --red: #9d3a35; --gold: #946a14; --code-bg: #16201b; --code-ink: #d6e6d8; --shadow: 0 16px 38px rgba(25, 34, 43, 0.08); --radius: 10px; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.page-explainer * { box-sizing: border-box; } html:has(body.page-explainer) { scroll-behavior: smooth; } body.page-explainer { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; background-image: linear-gradient(#e3e9ed 1px, transparent 1px), linear-gradient(90deg, #e3e9ed 1px, transparent 1px); background-size: 64px 64px; background-position: center top; } body.page-explainer .page a { color: var(--blue); } body.page-explainer .page { max-width: 1180px; margin: 0 auto; padding: 32px 22px 56px; } body.page-explainer .page > header { padding: 30px 0 24px; border-bottom: 1px solid var(--line); } body.page-explainer .eyebrow { color: var(--green); font-family: var(--mono); font-size: 13px; text-transform: none; letter-spacing: 0.02em; font-weight: 500; } body.page-explainer .page h1 { margin: 10px 0 12px; font-size: 40px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; } body.page-explainer .lede { max-width: 820px; color: #3a4650; font-size: 18px; margin: 0; } body.page-explainer .page > header nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; } body.page-explainer .page > header nav a { display: inline-block; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft, #3a4650); text-decoration: none; padding: 7px 11px; border-radius: 7px; font-size: 13px; font-family: var(--mono); transition: all .14s ease; } body.page-explainer .page > header nav a:hover { color: var(--green); border-color: #c4ddcd; background: #e4f0e9; } body.page-explainer .page section { margin: 34px 0; } body.page-explainer .page h2 { margin: 0 0 14px; font-size: 25px; line-height: 1.2; letter-spacing: 0; } body.page-explainer .page h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0; } body.page-explainer .page p { margin: 0 0 12px; } body.page-explainer .grid { display: grid; gap: 14px; } body.page-explainer .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-explainer .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.page-explainer .grid-spaced { margin-top: 16px; } body.page-explainer .table-block { margin: 22px 0 20px; } body.page-explainer .table-block h3 { margin-bottom: 12px; } body.page-explainer .grid > * { min-width: 0; } body.page-explainer .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; } body.page-explainer .plain-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; } body.page-explainer .kpi { display: grid; gap: 4px; min-height: 104px; } body.page-explainer .kpi strong { font-size: 30px; line-height: 1; } body.page-explainer .kpi span { color: var(--muted); font-size: 14px; } body.page-explainer .tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } body.page-explainer .tag { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 2px 8px; background: var(--soft); border: 1px solid var(--line); color: #34414c; font-size: 12px; font-weight: 650; } body.page-explainer .callout { border-left: 4px solid var(--blue); background: #e4f0e9; padding: 12px 14px; border-radius: 0 6px 6px 0; margin: 14px 0; } body.page-explainer .callout.warning { border-left-color: var(--gold); background: #f6efda; } body.page-explainer .page table { width: 100%; max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; } body.page-explainer .page th, body.page-explainer .page td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } body.page-explainer .page th { background: #f5f7f9; color: #2a343d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } body.page-explainer .page tr:last-child td { border-bottom: 0; } body.page-explainer .page code { font-family: var(--mono); font-size: 0.92em; background: #eef2f4; color: var(--green); padding: 1px 5px; border-radius: 5px; } body.page-explainer .page pre { margin: 0; max-width: 100%; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius); padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.45; white-space: pre; } body.page-explainer .page pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: inherit; } body.page-explainer .page pre.tree-map { background: #ffffff; color: var(--green); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--green); } body.page-explainer .page pre.tree-map code { color: inherit; } body.page-explainer .page pre.tree-map::selection, body.page-explainer .page pre.tree-map code::selection { background: #235b8e; color: #ffffff; } body.page-explainer .diagram { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } body.page-explainer .diagram-frame { margin: 0; overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; } body.page-explainer .diagram-frame img { display: block; width: 100%; min-width: 920px; height: auto; } body.page-explainer .diagram-frame figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; } body.page-explainer .svg-title { font: 700 14px var(--sans); fill: #1d252c; } body.page-explainer .svg-text { font: 13px var(--sans); fill: #2f3b44; } body.page-explainer .svg-small { font: 11px var(--sans); fill: #52616d; } body.page-explainer .svg-box { fill: #fffdfa; stroke: #bcb5a8; stroke-width: 1.2; } body.page-explainer .svg-core { fill: #e9f1f6; stroke: #235b8e; } body.page-explainer .svg-tool { fill: #eaf4ec; stroke: #2f6f50; } body.page-explainer .svg-ext { fill: #f7eed4; stroke: #8b6b22; } body.page-explainer .svg-err { fill: #f7e7e4; stroke: #a43e3e; } body.page-explainer .svg-decision { fill: #fff7d8; stroke: #8b6b22; stroke-width: 1.2; } body.page-explainer .arrow { stroke: #4d5963; stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); } body.page-explainer .arrow-dashed { stroke-dasharray: 5 4; } body.page-explainer .step-dot { fill: #1d252c; } body.page-explainer .step-num { font: 700 11px var(--sans); fill: #ffffff; text-anchor: middle; dominant-baseline: central; } body.page-explainer .page details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; } body.page-explainer .page details + details { margin-top: 10px; } body.page-explainer .page summary { cursor: pointer; padding: 12px 14px; font-weight: 750; } body.page-explainer .page details .inside { padding: 0 14px 14px; } body.page-explainer .page ul, body.page-explainer .page ol { margin-top: 0; padding-left: 22px; } body.page-explainer .page li { margin: 6px 0; } body.page-explainer .page > footer { border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 13px; } @media (max-width: 780px) { body.page-explainer .page { padding: 24px 16px 42px; } body.page-explainer .page h1 { font-size: 32px; } body.page-explainer .grid.cols-2, body.page-explainer .grid.cols-3 { grid-template-columns: 1fr; } body.page-explainer .page table { font-size: 13px; } body.page-explainer .page th, body.page-explainer .page td { padding: 8px; } } @media print { body.page-explainer { background: white; } body.page-explainer .page { max-width: none; padding: 18px; } body.page-explainer .page > header nav { display: none; } body.page-explainer .panel, body.page-explainer .diagram { box-shadow: none; } body.page-explainer .page pre { white-space: pre-wrap; background: #f0f0f0; color: #111; } } /* ============================================================ Transcripts page ============================================================ */ :root { --bg: #eceff2; --panel: #ffffff; --ink: #19222b; --muted: #69757f; --line: #d5dde3; --accent: #1f7a4d; --agent: #e4f0e9; --assistant: #eaf2f8; --tool: #f6efda; --subagent: #f3ece2; --error: #f6e6e4; --ok: #1f7a4d; --bad: #9d3a35; --code-bg: #f5f7f9; --radius: 10px; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.page-transcripts * { box-sizing: border-box; } body.page-transcripts { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; background-image: linear-gradient(#e3e9ed 1px, transparent 1px), linear-gradient(90deg, #e3e9ed 1px, transparent 1px); background-size: 64px 64px; } body.page-transcripts header.page-title { width: min(1180px, calc(100vw - 48px)); margin: 0 auto; padding: 30px 0 24px; border-bottom: 1px solid var(--line); } body.page-transcripts .page-title .eyebrow { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 10px; letter-spacing: 0.02em; font-weight: 500; } body.page-transcripts h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: 0; } body.page-transcripts .page-title h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; } body.page-transcripts .page-title .muted { max-width: 820px; color: #3a4650; font-size: 18px; } body.page-transcripts h2 { margin: 0 0 4px; font-size: 21px; } body.page-transcripts h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); } body.page-transcripts button, body.page-transcripts input, body.page-transcripts select { font: inherit; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); padding: 8px 10px; } body.page-transcripts button { cursor: pointer; } body.page-transcripts button:focus, body.page-transcripts input:focus, body.page-transcripts select:focus, body.page-transcripts summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; } body.page-transcripts .muted { color: var(--muted); } body.page-transcripts .layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: calc(100vh - 50px); } body.page-transcripts .transcript-layout-single { grid-template-columns: minmax(0, 1fr); min-height: auto; } body.page-transcripts .transcript-layout-single main { width: min(1180px, calc(100vw - 48px)); margin: 0 auto; } body.page-transcripts aside { background: var(--panel); border-right: 1px solid var(--line); padding: 16px; position: sticky; top: 50px; height: calc(100vh - 50px); overflow: auto; } body.page-transcripts main { padding: 18px 24px 40px; min-width: 0; } body.page-transcripts .controls { display: grid; gap: 10px; margin-bottom: 14px; } body.page-transcripts .transcript-toolbar { grid-template-columns: minmax(260px, 1fr) 190px auto; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } body.page-transcripts .agent-list { display: grid; gap: 8px; } body.page-transcripts .agent-button { width: 100%; text-align: left; display: grid; gap: 2px; border-radius: var(--radius); } body.page-transcripts .agent-button.active { background: var(--accent); border-color: var(--accent); color: #fff; } body.page-transcripts .agent-button.active .muted { color: #d3eade; } body.page-transcripts .stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } body.page-transcripts .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } body.page-transcripts .stat strong { display: block; font-size: 20px; } body.page-transcripts .agent-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; } body.page-transcripts .agent-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } body.page-transcripts .audit-spec { border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; padding: 12px; margin-bottom: 12px; display: grid; gap: 14px; } body.page-transcripts .audit-section h3 { margin-bottom: 8px; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; } body.page-transcripts .audit-section ol { margin: 0; padding-left: 22px; } body.page-transcripts .audit-section li + li { margin-top: 4px; } body.page-transcripts .system-prompt { margin-top: 16px; } body.page-transcripts .tool-overview { border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; padding: 12px; margin: 12px 0; } body.page-transcripts .tool-overview h3 { margin: 0 0 10px; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; } body.page-transcripts .tool-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.page-transcripts .tool-overview-item { border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding: 10px; min-width: 0; } body.page-transcripts .tool-overview-item h4 { margin: 0 0 7px; font-size: 14px; color: var(--ink); } body.page-transcripts .tool-overview-item .plain-text { margin-top: 8px; color: var(--ink-soft); font-size: 13px; } body.page-transcripts .pill-row { display: flex; flex-wrap: wrap; gap: 6px; } body.page-transcripts .pill { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--muted); background: #fff; font-size: 12px; } body.page-transcripts .pill.ok { color: var(--ok); border-color: #b8d9bf; background: #f0faf2; } body.page-transcripts .pill.error { color: var(--bad); border-color: #e3b9b7; background: var(--error); } body.page-transcripts .transcript { display: grid; gap: 12px; margin-top: 16px; } body.page-transcripts .event { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; min-width: 0; } body.page-transcripts .event.error { border-color: #e0b4b2; background: var(--error); } body.page-transcripts .event-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); } body.page-transcripts .event-title { display: flex; gap: 8px; align-items: center; min-width: 0; } body.page-transcripts .badge { font-family: var(--mono); text-transform: uppercase; font-size: 11px; border-radius: 5px; padding: 3px 6px; white-space: nowrap; } body.page-transcripts .badge.agent { background: var(--agent); color: var(--ok); } body.page-transcripts .badge.chat { background: var(--assistant); color: #075a71; } body.page-transcripts .badge.tool { background: var(--tool); color: #765700; } body.page-transcripts .badge.subagent { background: var(--subagent); color: #7a4618; } body.page-transcripts .badge.error { background: var(--error); color: var(--bad); } body.page-transcripts .duration { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; } body.page-transcripts .event-body { padding: 12px; display: grid; gap: 12px; min-width: 0; } body.page-transcripts .bubble { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; background: #fff; min-width: 0; overflow-wrap: anywhere; } body.page-transcripts .bubble.assistant { background: var(--assistant); border-color: #c8e3eb; } body.page-transcripts .bubble.tool-call { background: var(--tool); border-color: #ecdca6; } body.page-transcripts .bubble.tool-result { background: #fffdf4; border-color: #ecdca6; } body.page-transcripts .bubble.subagent { background: var(--subagent); border-color: #edcfb8; } body.page-transcripts .bubble.final { background: #effaf2; border-color: #badbc1; } body.page-transcripts .bubble.context { background: #f8fafb; } body.page-transcripts .write-input .plain-text { font-family: var(--mono); font-size: 12px; line-height: 1.5; max-height: 480px; overflow: auto; background: rgba(255,255,255,.58); border: 1px solid rgba(214,179,65,.35); border-radius: 6px; padding: 10px; } body.page-transcripts .write-path { font-family: var(--mono); font-size: 12px; color: #5f4705; background: rgba(255,255,255,.6); border: 1px solid rgba(214,179,65,.35); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; overflow-wrap: anywhere; } body.page-transcripts .compact-call > div:not(.label) > strong, body.page-transcripts .compact-call > div:not(.label) > .muted { display: block; min-width: 0; overflow-wrap: anywhere; } body.page-transcripts .label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; } body.page-transcripts .message-list { display: grid; gap: 8px; min-width: 0; } body.page-transcripts .message { border-left: 3px solid var(--line); padding: 7px 9px; background: #fff; border-radius: 0 6px 6px 0; min-width: 0; } body.page-transcripts .message.user { border-color: #7da8b6; } body.page-transcripts .message.assistant { border-color: #6baec2; } body.page-transcripts .message.tool { border-color: #d6b341; } body.page-transcripts .tool-result-list { display: grid; gap: 6px; min-width: 0; } body.page-transcripts .tool-result-row summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; } body.page-transcripts .tool-result-row .summary-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-transcripts .tool-result-row .call-id { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; } body.page-transcripts .role { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } body.page-transcripts details { border: 1px solid var(--line); border-radius: 6px; background: #fff; min-width: 0; } body.page-transcripts summary { cursor: pointer; padding: 8px 10px; color: var(--muted); font-weight: 650; overflow-wrap: anywhere; } body.page-transcripts .details-body { padding: 0 10px 10px; min-width: 0; } body.page-transcripts .output-details .details-body { padding-top: 0; } body.page-transcripts .output-details pre { max-height: 720px; } body.page-transcripts .nested-events { background: #fbfcfd; border-color: var(--line); } body.page-transcripts .nested-events > summary { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); } body.page-transcripts .nested-events-body { display: grid; gap: 10px; padding: 0 10px 10px 16px; border-left: 2px solid var(--line); margin-left: 10px; } body.page-transcripts .nested-events-body .event { box-shadow: none; } body.page-transcripts pre { margin: 0; padding: 10px; background: var(--code-bg); color: #10202b; border-radius: 6px; overflow: auto; max-height: 560px; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; line-height: 1.45; } body.page-transcripts .plain-text { white-space: pre-wrap; word-break: break-word; } body.page-transcripts .empty { color: var(--muted); padding: 12px; } body.page-transcripts .layout footer { margin-top: 24px; color: var(--muted); font-size: 12px; } @media (max-width: 860px) { body.page-transcripts header.page-title { width: calc(100vw - 32px); padding: 24px 0 22px; } body.page-transcripts .page-title h1 { font-size: 32px; } body.page-transcripts .layout { grid-template-columns: 1fr; } body.page-transcripts aside { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } body.page-transcripts .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-transcripts .tool-overview-grid { grid-template-columns: 1fr; } body.page-transcripts .agent-head, body.page-transcripts .event-head { display: grid; } } @media print { body.page-transcripts header.page-title, body.page-transcripts aside { position: static; } body.page-transcripts .layout { display: block; } body.page-transcripts .controls { display: none; } body.page-transcripts .event, body.page-transcripts .agent-card { break-inside: avoid; } body.page-transcripts { background: #fff; } } /* ---- examples page: LongMemEval / transcript toggle ---- */ .ex-toggle{display:flex;justify-content:center;gap:8px;width:min(1180px,calc(100vw - 48px));margin:18px auto 6px;} .ex-toggle button{font-family:var(--mono);font-size:13px;padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink-soft);cursor:pointer;transition:color .15s,background .15s,border-color .15s;} .ex-toggle button:hover{color:var(--green-deep);border-color:var(--green-line);} .ex-toggle button.is-active{color:var(--green-deep);background:var(--green-wash);border-color:var(--green-line);font-weight:600;} .ex-panel[hidden]{display:none !important;} .md-render{width:min(860px,calc(100vw - 48px));margin:0 auto;padding:14px 0 64px;color:var(--ink);font-family:var(--sans);line-height:1.62;} .md-render .md-eyebrow{font-family:var(--mono);font-size:13px;color:var(--green);letter-spacing:.04em;font-weight:500;margin:6px 0 6px;} .md-render h1{font-size:30px;margin:0 0 8px;letter-spacing:-.02em;font-weight:700;} .md-render h2{font-size:20px;margin:30px 0 10px;color:var(--green-deep);border-bottom:1px solid var(--line);padding-bottom:6px;} .md-render h3{font-size:16px;margin:20px 0 8px;} .md-render p{margin:10px 0;color:var(--ink-soft);} .md-render ul{margin:10px 0;padding-left:22px;color:var(--ink-soft);} .md-render li{margin:7px 0;} .md-render a{color:var(--green);text-decoration:underline;text-underline-offset:2px;} .md-render code{font-family:var(--mono);font-size:.86em;background:var(--green-wash);padding:1px 5px;border-radius:4px;color:var(--green-deep);} .md-render strong{color:var(--ink);} .md-table-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:8px;max-width:620px;} .md-render table{width:100%;border-collapse:collapse;font-size:13px;} .md-render th,.md-render td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;} .md-render td:first-child,.md-render th:first-child{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap;} .md-render thead th{background:var(--green-wash);color:var(--green-deep);font-weight:600;} .md-render tbody tr:last-child td{border-bottom:none;}