Source index

public/styles.css

:root{color-scheme:light;--ink:#172e35;--muted:#57696c;--paper:#f6f5ee;--white:#fffef8;--line:#d9dfd6;--green:#196b58;--lime:#e0edbf;--rust:#ad512e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.55}a{color:inherit;text-underline-offset:4px}button,textarea{font:inherit}button,a,textarea{outline-offset:5px}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #ad512e}button{cursor:pointer}.masthead{max-width:1320px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{font-size:15px;letter-spacing:.16em;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:12px}.brandmark{background:var(--ink);color:var(--lime);display:grid;place-items:center;width:38px;height:38px;font-size:29px;letter-spacing:0}.header-right{display:flex;align-items:center;gap:24px;font-size:12px}.header-right a{text-decoration:none}.status{border:1px solid var(--line);padding:7px 10px;border-radius:20px;font-size:10px;letter-spacing:.07em;background:var(--white);max-width:240px}.status.connected{color:var(--green);border-color:#9bbbab}main{max-width:1240px;margin:auto}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:90px;padding:72px 0 63px;align-items:center}.eyebrow{font-family:Consolas,"Courier New",monospace;font-size:10px;font-weight:700;letter-spacing:.15em;margin:0 0 17px;color:var(--green)}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,5.4vw,70px);line-height:1.08;font-weight:500;letter-spacing:-2.6px;margin:0 0 24px}h1 span{color:var(--green)}.intro{font-size:16px;max-width:610px;color:var(--muted);margin:0 0 24px}.hero-metrics{display:flex;flex-wrap:wrap;gap:28px;font-size:11px;color:var(--muted)}.hero-metrics b{font-size:17px;color:var(--ink);margin-right:4px}.route-diagram{padding:32px 35px;background:var(--lime);border:1px solid #bfce9d;position:relative}.route-diagram:before{content:"CONTEXT ROUTE";position:absolute;right:23px;top:-11px;background:var(--paper);padding:0 8px;font-family:Consolas,monospace;font-size:10px;letter-spacing:.13em}.route-diagram div{display:grid;grid-template-columns:33px 1fr;gap:0 8px}.route-diagram b{font-size:15px}.route-diagram small{grid-column:2;color:var(--muted);font-size:11px}.step-no{grid-row:span 2;font:12px Consolas,monospace;padding-top:5px}.route-diagram i{font-style:normal;display:block;margin:14px 0 14px 44px;color:var(--green)}.workspace{display:grid;grid-template-columns:1.65fr 1fr;border:1px solid var(--line);background:var(--white)}.query-panel{padding:30px 34px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading .eyebrow{margin-bottom:0}.mode-tag{font:9px Consolas,monospace;letter-spacing:.07em;color:var(--green);border:1px solid #c4d8c8;padding:5px 8px;background:#f1f7ec}h2{font-size:27px;line-height:1.22;letter-spacing:-.7px;font-weight:600;margin:22px 0 14px}.muted{color:var(--muted);font-size:12px}.query-panel>p{max-width:600px}form{margin-top:26px}label{display:block;font-size:12px;font-weight:650;margin-bottom:10px}textarea{display:block;width:100%;padding:15px 17px;background:var(--paper);border:1px solid #bfcac0;border-radius:0;resize:vertical;line-height:1.6;font-size:14px;color:var(--ink)}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:13px}.form-bottom .muted{max-width:250px;font-size:10px}button[type=submit],.primary-link{background:var(--ink);color:var(--white);border:0;padding:11px 16px;font-size:12px;font-weight:650;text-decoration:none;display:inline-flex;gap:16px;justify-content:space-between;align-items:center}button:disabled{opacity:.5;cursor:wait}.request-status{font-size:12px;min-height:19px;color:var(--rust);margin:12px 0}.example-area{border-top:1px solid var(--line);padding-top:18px}.examples{display:flex;flex-wrap:wrap;gap:8px}.example-button{background:transparent;color:var(--ink);border:1px solid var(--line);padding:7px 10px;font-size:10px}.example-button.selected{background:var(--lime);border-color:#a6bd80}.coverage-panel{border-left:1px solid var(--line);padding:34px;background:#eff2e9}.coverage-panel h2{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.2;margin:0 0 26px}.coverage-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.coverage-list span{border-bottom:1px solid #b9c9ad;padding:4px 0;font-size:11px;margin-right:10px}.scope-note{font-size:12px;color:var(--muted);max-width:320px}.text-link{display:inline-block;font-size:11px;color:var(--green);font-weight:600;margin-top:8px}.result-section{padding:55px 0}.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:22px}.section-heading .eyebrow{margin:0}.section-heading h2{margin:10px 0 0}.result-grid{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--line);background:var(--white)}.answer-panel{padding:30px 35px}.answer-question{font-weight:650;font-size:15px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}.answer-content{font-size:13px;line-height:1.8}.answer-content p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 15px}.answer-content h3{font-size:15px;margin:22px 0 10px}.answer-content a{color:var(--green);word-break:break-word}.citations{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:11px}.citation{display:block;margin:8px 0;overflow-wrap:anywhere}.trace-panel{border-left:1px solid var(--line);padding:26px;background:#edf0e9;min-width:0}.plain-button{background:none;border:0;text-decoration:underline;color:var(--green);font-size:10px;padding:0}.run-metrics{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0;color:var(--muted);font:10px Consolas,monospace}.trace-panel details{border-top:1px solid #cbd4c7;padding:12px 0}.trace-panel summary{cursor:pointer;font:11px Consolas,monospace;font-weight:650}.trace-panel pre{font:10px/1.5 Consolas,monospace;background:var(--white);border:1px solid var(--line);padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto}.trace-kind{font-size:9px;color:var(--muted);margin-top:4px}.bottom-strip{border:1px solid var(--line);padding:34px;display:flex;justify-content:space-between;gap:45px;margin-bottom:55px;background:var(--lime)}.bottom-strip h2{margin:0 0 12px}.bottom-strip p:last-child{font-size:12px;max-width:650px;color:var(--muted);margin-bottom:0}.bottom-strip>div:last-child{display:flex;flex-direction:column;min-width:200px;align-items:flex-start;justify-content:center}.bottom-strip .eyebrow{margin-bottom:12px}footer{max-width:1320px;margin:auto;padding:25px 40px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:10px;color:var(--muted)}.error{color:#912d2d}.success{color:var(--green)}@media(max-width:1320px){main{padding:0 40px}}@media(max-width:800px){.masthead{padding:20px 24px;align-items:flex-start}.header-right{gap:12px;flex-wrap:wrap;justify-content:flex-end}.header-right a{display:none}.hero{gap:30px;grid-template-columns:1fr;padding:45px 0}.hero h1{font-size:54px}.route-diagram{padding:24px}.workspace,.result-grid{grid-template-columns:1fr}.coverage-panel,.trace-panel{border-left:0;border-top:1px solid var(--line)}main{padding:0 24px}.hero-metrics{gap:18px}.query-panel,.coverage-panel,.answer-panel,.trace-panel{padding:24px}.form-bottom{align-items:flex-start}.bottom-strip{flex-direction:column;padding:24px;gap:25px}.section-heading{align-items:flex-start}.section-heading>.mode-tag{max-width:150px;font-size:8px}.panel-heading{align-items:flex-start}.mode-tag{font-size:8px}footer{padding:24px;flex-direction:column;gap:12px}}@media(max-width:420px){.hero h1{font-size:45px;letter-spacing:-2px}.brand{font-size:12px;gap:8px}.brandmark{width:32px;height:32px}.status{font-size:8px;max-width:125px}.form-bottom{flex-direction:column;gap:12px}.form-bottom .muted{max-width:none}.panel-heading{flex-wrap:wrap}main{padding:0 18px}.masthead{padding:18px}.query-panel,.coverage-panel,.answer-panel,.trace-panel{padding:20px}h2{font-size:24px}}