:root { --ink:#171b19; --muted:#69716d; --line:#dfe3e1; --soft:#f6f7f6; --green:#146b4a; --green-soft:#eaf5ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
body { background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; margin:0; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.site-shell { min-height:100vh; }
.site-header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:60px; justify-content:space-between; padding:0 max(22px,calc((100vw - 980px)/2)); }
.brand { align-items:center; color:var(--ink); display:flex; font-size:15px; font-weight:700; gap:9px; text-decoration:none; }
.brand-dot { background:var(--green); border-radius:3px; height:15px; width:15px; }
.status { align-items:center; color:var(--muted); display:flex; font-size:11px; gap:7px; }
.status i { background:#d59a31; border-radius:50%; height:7px; width:7px; }
.status i.online { background:#3a9b64; }
.content { margin:0 auto; max-width:980px; padding:42px 22px 28px; }
.intro h1 { font-size:30px; letter-spacing:-.03em; margin:0 0 10px; }
.intro p { color:#4d5652; font-size:14px; line-height:1.6; margin:0 0 10px; max-width:660px; }
.intro small { color:#8a918e; font-size:10px; }

.query-box { border:1px solid var(--line); border-radius:7px; margin-top:28px; padding:20px; }
.query-box label { display:block; font-size:12px; font-weight:700; margin:0 0 8px; }
.query-box label:not(:first-child) { margin-top:18px; }
.query-box label b { color:var(--green); margin-right:4px; }
.query-box select,.query-box input { background:#fff; border:1px solid #cfd5d2; border-radius:5px; color:var(--ink); font-size:12px; min-height:42px; outline:none; padding:0 12px; width:100%; }
.query-box select:focus,.query-box input:focus { border-color:#539677; box-shadow:0 0 0 2px #e1f1e8; }
.input-row { display:flex; gap:8px; }
.input-row input { flex:1; min-width:0; }
.run-button { background:var(--green); border:1px solid var(--green); border-radius:5px; color:#fff; font-size:12px; font-weight:700; padding:0 17px; }
.run-button:hover { background:#0f5a3e; }
.run-button:disabled { cursor:wait; opacity:.65; }
.examples { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.examples button { background:var(--soft); border:1px solid var(--line); border-radius:4px; color:#5e6863; font-size:10px; padding:6px 8px; }
.examples button:hover { border-color:#aeb9b4; color:var(--ink); }
.notice { background:#fff8e7; border-left:3px solid #dba63e; color:#6d592e; font-size:11px; line-height:1.5; margin:14px 0 0; padding:9px 11px; }

.run-summary { align-items:flex-end; border-bottom:1px solid var(--line); display:flex; gap:30px; justify-content:space-between; margin-top:40px; padding-bottom:18px; scroll-margin-top:20px; }
.section-label { color:var(--muted); display:block; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.run-summary h2 { font-size:18px; font-weight:600; line-height:1.4; margin:7px 0 0; }
.run-info { align-items:flex-end; display:flex; flex-direction:column; gap:5px; }
.run-info span { color:var(--muted); font-size:9px; white-space:nowrap; }

.result-section { border-bottom:1px solid var(--line); }
details { border-top:1px solid var(--line); }
details:first-child { border-top:0; }
summary { align-items:center; cursor:pointer; display:flex; justify-content:space-between; list-style:none; padding:15px 2px; }
summary::-webkit-details-marker { display:none; }
summary span { font-size:12px; font-weight:700; }
summary small { color:#8a918e; font-size:9px; }
.approach { color:#3f4944; font-size:11px; line-height:1.65; margin:0; padding:0 20px 18px 25px; }
.approach li+li { margin-top:7px; }
.trace { border-top:1px solid var(--line); }
.message { padding:15px 14px; }
.message b { color:var(--muted); display:block; font-size:9px; margin-bottom:6px; text-transform:uppercase; }
.message p { font-size:11px; line-height:1.55; margin:0; }
.message.assistant { background:var(--green-soft); border-top:1px solid #d9eae1; }
.tool { border-top:1px solid var(--line); padding:14px; }
.tool-title { align-items:center; display:flex; gap:8px; }
.tool-title code { font-size:10px; font-weight:700; }
.tool-title small { color:#818985; font-size:9px; margin-left:auto; }
.check,.rejected { align-items:center; background:#dff1e6; border-radius:50%; color:#317050; display:flex; font-size:9px; height:20px; justify-content:center; width:20px; }
.rejected { background:#fbe0dc; color:#934739; }
.tool pre,.sql-section pre { background:#171b19; border-radius:4px; color:#dfe8e3; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; line-height:1.65; margin:12px 0 0; overflow:auto; padding:15px; white-space:pre-wrap; }
.table-wrap { border:1px solid var(--line); border-radius:4px; margin-top:12px; overflow:auto; }
table { border-collapse:collapse; min-width:100%; }
th { background:var(--soft); color:var(--muted); font-size:8px; letter-spacing:.06em; padding:8px 10px; text-align:left; text-transform:uppercase; }
td { border-top:1px solid var(--line); font-family:ui-monospace,monospace; font-size:9px; padding:9px 10px; }

.final-answer { padding:30px 0; }
.final-answer>p { font-size:18px; line-height:1.55; margin:9px 0 0; }
.assumptions { background:var(--soft); border:1px solid var(--line); border-radius:4px; color:#5d6662; font-size:10px; line-height:1.55; margin-top:18px; padding:11px 13px; }
.assumptions b { color:#404844; }
.assumptions ul { margin:6px 0 0; padding-left:17px; }
.sql-section { border-top:1px solid var(--line); padding:25px 0 40px; }
.sql-heading { align-items:center; display:flex; justify-content:space-between; }
.text-button { background:transparent; border:0; color:var(--green); font-size:10px; font-weight:700; padding:4px; }
.sql-section pre { margin-top:12px; }
footer { border-top:1px solid var(--line); color:#8a918e; display:flex; font-size:9px; justify-content:space-between; padding:18px 0 0; }
footer a { color:var(--green); }
.footer-links { align-items:center; display:flex; gap:12px; }
.creator-link { background:var(--soft); border:1px solid var(--line); border-radius:999px; color:#68716d; padding:6px 9px; text-decoration:none; }
.creator-link strong { color:var(--green); }
.creator-link:hover { border-color:#aeb9b4; }

@media (max-width:640px) {
  .site-header { padding:0 18px; }
  .content { padding:32px 18px 24px; }
  .intro h1 { font-size:26px; }
  .query-box { padding:16px; }
  .input-row { flex-direction:column; }
  .run-button { min-height:42px; }
  .run-summary { align-items:flex-start; flex-direction:column; gap:13px; }
  .run-info { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  summary { align-items:flex-start; gap:12px; }
  summary small { text-align:right; }
  .tool-title { align-items:flex-start; flex-wrap:wrap; }
  .tool-title small { flex-basis:100%; margin-left:28px; }
  footer { flex-direction:column; gap:8px; }
  .footer-links { gap:12px; }
}