main,body>header,footer{max-width:1120px}main{padding-top:36px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font:12px 'IBM Plex Mono',monospace;color:var(--accent);margin-bottom:10px}
.lede{max-width:750px;font-size:18px}h1{font-size:clamp(32px,5vw,48px)}
.stats{display:flex;flex-wrap:wrap;gap:12px 35px;margin:25px 0}.stats strong{font:600 28px Spectral,Georgia,serif;display:block}.stats span{font-size:13px;color:var(--muted)}
.panel{margin:34px 0;padding-top:8px;border-top:1px solid var(--line)}.panel h2{margin:12px 0 6px}.help{color:var(--muted);font-size:15px;max-width:800px}
.muted{color:var(--muted)}.small{font-size:13px}code{font:13px 'IBM Plex Mono',monospace;background:var(--surface2);padding:1px 4px;border-radius:4px}
button,select,textarea{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:7px 10px}
button{cursor:pointer}button:hover{border-color:var(--accent)}button.primary,#run{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lineage{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
#lineage{width:100%;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
#lineage text{font:12px 'IBM Plex Mono',monospace;fill:var(--ink);pointer-events:none}
#lineage .layer-label{font:600 13px Spectral,Georgia,serif;fill:var(--muted)}
#lineage .node rect{fill:var(--surface2);stroke:var(--line);rx:5;cursor:pointer}
#lineage .node.bronze rect{stroke:#b5773a}#lineage .node.silver rect{stroke:#7d8794}#lineage .node.gold rect{stroke:#c9a227}
#lineage .node.meta rect{stroke-dasharray:3 3}
#lineage .node:hover rect,#lineage .node.active rect{fill:var(--accent);stroke:var(--accent)}#lineage .node:hover text,#lineage .node.active text{fill:var(--accent-ink)}
#lineage .node.lit rect{stroke:var(--accent);stroke-width:2}
#lineage .edge{fill:none;stroke:var(--line);stroke-width:1.2}#lineage .edge.lit{stroke:var(--accent);stroke-width:2}#lineage .edge.dim{opacity:.25}
.detail{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:640px;overflow:auto;font-size:14px}
.detail h3{margin:0 0 4px;font-size:18px}.detail .kind{font:12px 'IBM Plex Mono',monospace;color:var(--muted);margin-bottom:8px}
.detail table{border-collapse:collapse;width:100%;font-size:13px}.detail td{padding:2px 6px 2px 0;vertical-align:top;border-bottom:1px solid var(--line)}.detail td .t{color:var(--muted);font:11px 'IBM Plex Mono',monospace}.detail td:first-child{white-space:nowrap;font:12px 'IBM Plex Mono',monospace}.detail td:last-child{color:var(--muted)}
.detail pre{font:12px/1.4 'IBM Plex Mono',monospace;background:var(--surface2);padding:8px;border-radius:6px;overflow:auto;max-height:260px;white-space:pre}
.detail details summary{cursor:pointer;color:var(--accent);margin:8px 0 4px}
.ready{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.sqlbox{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px}
.sidebar{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;max-height:260px;overflow:auto;font:12px 'IBM Plex Mono',monospace}
.sidebar h4{margin:6px 0 2px;font:600 12px Spectral,Georgia,serif;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sidebar button{display:block;width:100%;text-align:left;border:0;background:none;padding:2px 4px;font:inherit;color:var(--accent)}.sidebar button:hover{background:var(--surface2)}
.editor textarea{width:100%;box-sizing:border-box;font:13px/1.45 'IBM Plex Mono',monospace;resize:vertical}
.editor .row{display:flex;gap:12px;align-items:center;margin-top:8px}
.result{overflow:auto;margin-top:12px;max-height:480px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.result:empty{display:none}
.result table{border-collapse:collapse;font-size:13px;min-width:100%}.result th{position:sticky;top:0;background:var(--surface2);text-align:left;padding:6px 8px;font:600 12px 'IBM Plex Mono',monospace}
.result td{padding:4px 8px;border-top:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}.result td.num{text-align:right}
.chart{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px}
.chart svg{width:100%;height:auto;display:block}.chart text{font:11px 'IBM Plex Mono',monospace;fill:var(--muted)}.chart rect{fill:var(--accent)}
.controls{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}.controls label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.card{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card .group{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.card h4{margin:0 0 6px;font-size:14px}.card h4 span{color:var(--muted);font:12px 'IBM Plex Mono',monospace;margin-left:6px}
.card .f{display:grid;grid-template-columns:minmax(0,1fr) 64px 70px;gap:8px;font-size:13px;align-items:center;padding:2px 0}
.card .f .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px 'IBM Plex Mono',monospace}.card .f .v{text-align:right;font-variant-numeric:tabular-nums}
.card .bar{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}.card .bar i{display:block;height:100%;background:var(--accent)}
.card .who{grid-column:1/-1;font-size:15px}.card .who strong{font:600 22px Spectral,Georgia,serif}
@media (max-width:820px){.lineage,.sqlbox{grid-template-columns:1fr}.detail{max-height:none}.sidebar{max-height:160px}}

.askrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}.askrow input[type=search]{flex:1;min-width:240px;font:inherit;font-size:15px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.askrow select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink)}
.linkish{font:inherit;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* the model is writing: a visible working state on the Ask panel (spinner, larger status, dimmed chips) */
#ask{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);min-width:72px}
.askrow.busy #ask{opacity:.85}
#ask-status{font-size:15px;color:var(--ink);min-height:1.6em;display:flex;align-items:center;gap:10px;margin:6px 0 0}
#ask-status.muted{color:var(--muted);font-size:13px}
#ask-status.working{color:var(--ink);font-size:15px}
#ask-status .spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#ask-status .spin{animation:none;border-top-color:var(--accent);border-right-color:var(--accent)}}
#askexamples.busy button{opacity:.5;pointer-events:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.art{margin:12px 0 0}.art img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.art figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.art{max-width:360px}}

/* warehouse: sample marker, tests */
.hero{grid-template-columns:1fr}
.test{display:inline-block;font:11px 'IBM Plex Mono',monospace;padding:1px 6px;border-radius:10px;background:var(--surface2);margin:1px 2px 1px 0}
.test.pass{border:1px solid #3B8C5A}.test.fail,.test.error{border:1px solid var(--accent2)}
.tests table{border-collapse:collapse;font-size:13px;width:100%}.tests th,.tests td{text-align:left;padding:4px 10px 4px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tests th{font:600 12px 'IBM Plex Mono',monospace;color:var(--muted)}
.sidebar p{margin:6px 4px 0}