ripple-sql 0.1.0__py3-none-any.whl

ripple/server.py

@@ -0,0 +1,184 @@
+"""`ripple serve`: the answer page, served live from your files.
+
+A small stdlib HTTP server on localhost (local tool, local browser, nothing
+leaves the machine). It opens on the whole project: every model in its
+layer with the links between them, a question box, and the coverage ladder
+(unresolved tables, query history). Hovering a model lights its chain,
+clicking one unfolds its columns, and clicking a column asks. Each answer
+comes from the graph as the files are now; edit a model and ask again.
+
+The server only reads. It never writes a file or runs a command on the
+browser's behalf, so a page in another tab cannot make it do anything.
+Binding to 127.0.0.1 alone would not keep out a page whose domain rebinds
+its DNS to the loopback address; the Host header check does. Anything but
+127.0.0.1, localhost or [::1] (with or without a port) gets a 403.
+
+Routes:
+    /                      the page (a question in ?q=model.column&dir=breaks|trace)
+    /api/breaks?target=    the answer contract and its text, as the CLI prints it
+    /api/trace?target=     the same, upstream
+    /api/graph             full lineage graph JSON
+"""
+
+from __future__ import annotations
+
+import json
+import re
+import sys
+import threading
+import webbrowser
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+from urllib.parse import parse_qs, urlparse
+
+from ripple import answer_page, home
+from ripple.answer import (
+    breaks_answer,
+    breaks_lines,
+    noun_for,
+    plain_text,
+    trace_answer,
+    trace_lines,
+)
+
+DEFAULT_PORT = 8722
+HOST_REFUSED = (
+    "refused: open the page from the localhost URL ripple printed "
+    "(http://127.0.0.1:{port}), not from another host name"
+)
+_LOOPBACK_HOST = re.compile(r"(127\.0\.0\.1|localhost|\[::1\])(:\d+)?", re.IGNORECASE)
+
+
+def _host_allowed(host: str | None) -> bool:
+    """The Host header must name loopback. A DNS-rebinding page sends its own
+    domain here, so this check, not the bind address, is what keeps it out."""
+    return bool(host) and _LOOPBACK_HOST.fullmatch(host.strip()) is not None
+
+
+def serve(
+    path: str = ".",
+    dialect: str | None = None,
+    port: int = DEFAULT_PORT,
+    target: str | None = None,
+    open_browser: bool = True,
+) -> None:
+    try:
+        server, url = make_server(path, dialect, port)
+    except OSError as e:
+        raise SystemExit(
+            f"port {port} is busy ({e.strerror}); try --port with another number"
+        ) from None
+    if target:
+        url += f"?q={target}"
+    print(f"ripple at {url}  (ctrl-c to stop)")
+    if open_browser:
+        threading.Timer(0.4, lambda: webbrowser.open(url)).start()
+    try:
+        server.serve_forever()
+    except KeyboardInterrupt:
+        print("\nstopped")
+    finally:
+        server.server_close()
+
+
+def make_server(path: str, dialect: str | None, port: int) -> tuple[ThreadingHTTPServer, str]:
+    """The server, bound and ready, and its URL. Builds the graph first so
+    the first page is instant and a broken project fails here, in the
+    terminal, not in a browser tab."""
+    from ripple.mcp_server import RippleService
+
+    service = RippleService(path=path, dialect=dialect)
+    print(f"scanning {Path(path).resolve()} ...")
+    stats = service.graph().stats()
+    print(f"{stats['models']} models, {stats['edges']} column edges")
+    server = _Server(("127.0.0.1", port), _make_handler(service))
+    return server, f"http://127.0.0.1:{server.server_address[1]}"
+
+
+class _Server(ThreadingHTTPServer):
+    # SO_REUSEADDR means "skip TIME_WAIT" on Unix but "share a port that is
+    # already listening" on Windows, where a second ripple serve on the same
+    # port would bind fine and answer none of the requests.
+    allow_reuse_address = sys.platform != "win32"
+
+
+def home_page(service) -> str:
+    """The page with no answer yet: the project, the ladder, the starters."""
+    from ripple.project import find_project_root
+    from ripple.usage.ingest import read_store
+
+    graph = service.graph()
+    stats = graph.stats()
+    root = find_project_root(Path(service.path))
+    info = answer_page.project_info(graph.project, root)
+    live = {
+        "api": "/api",
+        "edges": stats["edges"],
+        "review": stats["review_required_edges"],
+        "ladder": home.ladder_rows(stats, graph.unresolved_tables(), read_store(root)),
+        "starters": home.starters(graph.edges),
+        "columns": home.column_ids(graph.edges),
+        "map": home.model_map(graph.to_dict()["nodes"], graph.edges),
+    }
+    return answer_page.render_live(info, live)
+
+
+def answer_payload(graph, kind: str, target: str) -> dict:
+    """The contract plus the text the CLI prints for it, so the page and
+    the terminal cannot disagree."""
+    model, _, column = target.rpartition(".")
+    if not model:
+        raise ValueError(f"expected target=model.column, got '{target}'")
+    noun = noun_for(graph.project.mode)
+    if kind == "breaks":
+        answer = breaks_answer(graph.breaks(model, column), noun)
+        text = plain_text(breaks_lines(answer, full=True))
+    else:
+        answer = trace_answer(graph.trace(model, column), noun)
+        text = plain_text(trace_lines(answer))
+    return {"answer": answer, "text": text}
+
+
+def _make_handler(service):
+    class Handler(BaseHTTPRequestHandler):
+        def log_message(self, *args):  # keep the terminal quiet
+            pass
+
+        def do_GET(self):
+            if not _host_allowed(self.headers.get("Host")):
+                port = self.server.server_address[1]
+                self._json({"error": HOST_REFUSED.format(port=port)}, status=403)
+                return
+            parsed = urlparse(self.path)
+            route = parsed.path
+            try:
+                if route == "/":
+                    self._html(home_page(service))
+                elif route in ("/api/breaks", "/api/trace"):
+                    target = (parse_qs(parsed.query).get("target") or [""])[0]
+                    self._json(answer_payload(service.graph(), route.rsplit("/", 1)[1], target))
+                elif route == "/api/graph":
+                    self._json(service.graph().to_dict())
+                else:
+                    self.send_error(404)
+            except LookupError as e:
+                suggestions = getattr(e, "suggestions", [])
+                self._json({"error": str(e), "did_you_mean": suggestions}, status=404)
+            except ValueError as e:
+                self._json({"error": str(e)}, status=400)
+
+        def _json(self, payload: dict, status: int = 200):
+            self._send(json.dumps(payload, default=str).encode(), "application/json", status)
+
+        def _html(self, text: str):
+            self._send(text.encode("utf-8"), "text/html; charset=utf-8", 200)
+
+        def _send(self, body: bytes, ctype: str, status: int):
+            self.send_response(status)
+            self.send_header("Content-Type", ctype)
+            self.send_header("Content-Length", str(len(body)))
+            self.send_header("Cache-Control", "no-store")
+            self.end_headers()
+            self.wfile.write(body)
+
+    return Handler

ripple/sourcefiles.py

@@ -0,0 +1,64 @@
+"""Which files on disk feed lineage.
+
+The disk cache and the live server both answer "did anything change?" by
+stamping this list, so one walk defines it. Build output and vendored
+packages are pruned before descent: a background `dbt run` rewrites
+target/ on every invocation and must not invalidate the graph.
+"""
+
+from __future__ import annotations
+
+import hashlib
+import os
+from pathlib import Path
+
+EXCLUDED_DIRS = frozenset(
+    {
+        ".git",
+        ".venv",
+        "venv",
+        "node_modules",
+        "target",
+        "dbt_packages",
+        "dbt_modules",
+        "__pycache__",
+    }
+)
+SOURCE_SUFFIXES = frozenset({".sql", ".yml", ".yaml", ".lkml"})
+# lineage inputs that live under excluded or hidden dirs
+LINEAGE_INPUTS = ("target/manifest.json", ".ripple/schemas.json")
+
+
+def source_files(root: Path) -> list[Path]:
+    """Every SQL, YAML and LookML file under root, plus the dbt manifest and
+    the ingested schemas when they exist. Directory names are matched case
+    folded, so Target/ is build output on any filesystem. Symlinked
+    directories are not followed."""
+    found: list[Path] = []
+    for dirpath, dirnames, filenames in os.walk(root):
+        dirnames[:] = [d for d in dirnames if d.casefold() not in EXCLUDED_DIRS]
+        base = Path(dirpath)
+        found.extend(
+            base / name
+            for name in filenames
+            if os.path.splitext(name)[1].lower() in SOURCE_SUFFIXES
+        )
+    for rel in LINEAGE_INPUTS:
+        path = root / rel
+        if path.is_file():
+            found.append(path)
+    return sorted(found)
+
+
+def stamp(root: Path) -> str:
+    """What the files are right now: path, size and mtime of each. A rename
+    that keeps the count and the timestamps still changes it, which a count
+    and a newest mtime did not."""
+    digest = hashlib.sha256()
+    for f in source_files(root):
+        try:
+            stat = f.stat()
+        except OSError:
+            continue
+        digest.update(f"{f}|{stat.st_size}|{stat.st_mtime_ns}".encode())
+    return digest.hexdigest()

ripple/star_resolution.py

@@ -0,0 +1,100 @@
+"""Named-column resolution through a model's star projection.
+
+`SELECT * except(...)` over a statically resolvable relation leaves only a
+wildcard edge, so an exact-column question about the model finds nothing
+even though the source column is knowable (datario, round 11). This
+resolves a named column through the star edge when the answer is
+unambiguous, honoring the except-lists the graph retained. The refusal
+rules, hardened by the cycle-12 review (F4-F9, F20):
+
+- a column excepted on ANY star edge into the model refuses; union
+  branches merge their exclusions into those edges (F4, F7).
+- several star sources resolve only when exactly ONE provably owns the
+  column, where ownership evidence is edges, an analyzed report, a model's
+  declared columns, or a SOURCE's declared columns (F5, F9).
+- the answer is the immediate source, but only after walking the star
+  chain upstream: a hop whose own star excepts the column, or a fully
+  enumerated model that lacks it, refuses (F8, F6).
+- quoted mixed-case exclusions match exactly; the case-folded twin is a
+  different column and still resolves (F20).
+"""
+
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from ripple.engine.cte_tracing import star_excepted
+
+if TYPE_CHECKING:
+    from ripple.graph import LineageGraph
+
+WILDCARD = "*"
+
+
+def resolve_star_column(graph: LineageGraph, model: str, column: str) -> list[tuple[str, str]]:
+    col = column.lower()
+    candidates = graph._candidates.get(model.lower())
+    name = candidates[0] if candidates and len(candidates) == 1 else model
+    star_sources = _star_sources(graph, name)
+    if not star_sources:
+        return []
+    if any(e.dst_model == name and e.dst_column == col and e.kind == "value" for e in graph.edges):
+        # explicitly attributed already; the star does not own it
+        return []
+    if any(_excepted(graph, name, src, column) for src in star_sources):
+        # deliberately dropped somewhere (any union branch counts): the
+        # column may not exist on this model at all
+        return []
+    if len(star_sources) == 1:
+        src = star_sources[0]
+        return [(src, col)] if _chain_carries(graph, src, column, {name}) else []
+    owners = [s for s in star_sources if graph._model_owns_column(s, col)]
+    if len(owners) == 1 and _chain_carries(graph, owners[0], column, {name}):
+        return [(owners[0], col)]
+    return []
+
+
+def _star_sources(graph: LineageGraph, name: str) -> list[str]:
+    sources: list[str] = []
+    for e in graph.edges:
+        if (
+            e.dst_model == name
+            and e.kind == "value"
+            and e.src_column == WILDCARD
+            and e.dst_column == WILDCARD
+            and e.src_model not in sources
+        ):
+            sources.append(e.src_model)
+    return sources
+
+
+def _excepted(graph: LineageGraph, dst: str, src: str, column: str) -> bool:
+    return star_excepted(column, graph._star_excepts.get((dst, src), frozenset()))
+
+
+def _chain_carries(graph: LineageGraph, src: str, column: str, visited: set[str]) -> bool:
+    """True when the star chain upstream of src plausibly carries column.
+
+    An external relation with no star edges and no enumerated schema is the
+    class-D base case: the star is assumed to carry the asked column. Any
+    exclusion upstream, an enumerated model that lacks the column, or an
+    unresolvable multi-source hop refuses instead."""
+    col = column.lower()
+    if src in visited:
+        return False
+    visited.add(src)
+    if graph._model_owns_column(src, col):
+        return True
+    report = graph.reports.get(src)
+    if report is not None and report.status == "ok" and WILDCARD not in report.columns:
+        # fully enumerated and the column is not there
+        return False
+    upstream = _star_sources(graph, src)
+    if not upstream:
+        return True
+    if any(_excepted(graph, src, u, column) for u in upstream):
+        return False
+    if len(upstream) == 1:
+        return _chain_carries(graph, upstream[0], column, visited)
+    owners = [u for u in upstream if graph._model_owns_column(u, col)]
+    return len(owners) == 1 and _chain_carries(graph, owners[0], column, visited)

ripple/static/answer.css

@@ -0,0 +1,146 @@
+:root{
+  --bg:#F5F8FA; --surface:#FFFFFF; --well:#EEF3F6;
+  --ink:#0E1B26; --muted:#516373; --faint:#7F8F9C;
+  --line:#DCE5EB; --line-strong:#B7C6D1;
+  --accent:#0A7C93; --accent-strong:#065F71; --accent-soft:rgba(10,124,147,.55); --accent-ring:rgba(10,124,147,.28);
+  --review:#9A6200; --review-tint:#FBF4E3;
+  --wire:#B7C6D1;
+  --sans:"Avenir Next","Atkinson Hyperlegible","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
+  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
+  --r:3px;
+  --ease:cubic-bezier(.22,1,.36,1);
+}
+*{box-sizing:border-box}
+[hidden]{display:none!important}
+html{-webkit-text-size-adjust:100%}
+body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
+.wrap{max-width:1040px; margin:0 auto; padding:40px 28px 72px}
+.eyebrow{margin:0 0 18px; font:500 13px/1 var(--sans); color:var(--muted); display:flex; align-items:center; gap:8px}
+.mark{display:inline-block; width:16px; height:16px; border-radius:50%; flex:0 0 auto;
+  background:radial-gradient(circle, var(--accent) 0 2px, transparent 2.6px 4.4px, var(--accent-soft) 4.8px 5.6px, transparent 6px 6.6px, var(--accent-ring) 7px 7.8px, transparent 8.2px)}
+h1{margin:0 0 6px; font:600 26px/1.25 var(--sans); letter-spacing:-.01em; text-wrap:balance; overflow-wrap:anywhere}
+h1 code{font:500 24px/1 var(--mono); letter-spacing:0}
+.sum{margin:0; color:var(--muted); font-size:15px; display:flex; flex-wrap:wrap; gap:0 16px; align-items:baseline}
+.sum b{color:var(--ink); font-weight:600}
+.sum > span{position:relative}
+.sum > span + span::before{content:""; position:absolute; left:-9px; top:.3em; height:.9em; border-left:1px solid var(--line-strong)}
+
+.ask{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:28px 0 0; padding:16px 0 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
+.ask input,.ask select{font:400 14px var(--mono); padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--ink); min-width:0; height:36px}
+.ask input{flex:1 1 280px}
+.ask input::placeholder{color:var(--faint)}
+.ask select{font-family:var(--sans); padding-right:28px; appearance:none; -webkit-appearance:none;
+  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
+  background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size:5px 5px; background-repeat:no-repeat}
+.ask input:focus,.ask select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(27,27,26,.08)}
+.ask button{font:600 14px var(--sans); height:36px; padding:0 16px; border:0; border-radius:var(--r); background:var(--accent); color:#fff; cursor:pointer}
+.ask button:hover{background:var(--accent-strong)}
+.ask button:active{transform:translateY(1px)}
+.ask .fine{flex-basis:100%; margin:2px 0 0; font-size:13px; color:var(--muted)}
+.starters{flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:6px 0 0}
+.starters .lab{font:500 13px var(--sans); color:var(--muted); margin-right:2px}
+.starters button{font:400 13px var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:4px 9px; cursor:pointer; transition:border-color .15s var(--ease),background .15s var(--ease)}
+.starters button:hover{border-color:var(--ink); background:var(--well)}
+
+.change{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:22px 0 0}
+.change .lab{font:500 13px var(--sans); color:var(--muted); margin-right:2px}
+.change button{font:400 13px var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:5px 10px; cursor:pointer}
+.change button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
+.change .rebuild{flex-basis:100%; margin:6px 0 0; font:400 13px/1.5 var(--sans); color:var(--muted); overflow-wrap:anywhere}
+.change .rebuild b{color:var(--ink); font-weight:600}
+
+.demo,.map{margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
+.board{overflow-x:auto; padding:22px 22px 20px}
+.board-inner{position:relative; display:flex; gap:40px; align-items:flex-start; min-width:max-content}
+.wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
+.wires path{fill:none; stroke:var(--wire); stroke-width:1.25; stroke-linecap:round}
+.wires path.o{stroke:var(--accent-soft); stroke-width:1.5}
+.wires path.r{stroke:var(--review); stroke-dasharray:4 4}
+.lvl{display:flex; flex-direction:column; gap:14px; flex:0 0 auto; min-width:132px}
+.lhead{font:500 12.5px var(--sans); color:var(--muted); padding-bottom:6px; border-bottom:1px solid var(--line)}
+.lvl.asked .lhead{color:var(--accent); font-weight:600; border-bottom-color:var(--accent)}
+.grp{display:flex; flex-direction:column; gap:5px}
+.gname{font:400 12px var(--mono); color:var(--muted); padding-bottom:1px}
+.gname .bi{color:var(--ink); font-weight:600}
+.node{position:relative; z-index:1; display:inline-block; align-self:flex-start; font:400 13px/1 var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:7px 10px}
+.node.src{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:500}
+.node.src::before,.node.src::after{content:""; position:absolute; inset:-5px; border:1px solid var(--accent-ring); border-radius:7px; pointer-events:none}
+.node.src::after{inset:-10px; border-radius:11px; border-color:rgba(10,124,147,.14)}
+.node.bi{background:var(--ink); color:#fff; border-color:var(--ink)}
+.node.r{border-style:dashed; border-color:var(--review); background:var(--review-tint)}
+.node.unk{border-style:dashed; color:var(--faint); background:transparent}
+.board-foot{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; padding:10px 22px 12px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
+.key{display:inline-flex; align-items:center; gap:7px; font:400 12.5px var(--sans); color:var(--muted)}
+.key i{display:inline-block; width:16px; height:0; border-top:1.5px solid var(--wire)}
+.key i.r{border-top-style:dashed; border-color:var(--review)}
+.key s{display:inline-block; width:11px; height:11px; border-radius:2px; background:var(--ink); border:1px solid var(--ink); text-decoration:none}
+.key s.src{background:var(--well); border:1px dashed var(--line-strong)}
+.hint{margin-left:auto; font-size:12.5px; color:var(--faint)}
+.rows{padding:0 22px 14px; font-size:13.5px; color:var(--muted)}
+.rows b{color:var(--ink); font-weight:600}
+.term{background:var(--well); border-top:1px solid var(--line); border-radius:0 0 var(--r) var(--r)}
+.term-bar,.nav{display:flex; align-items:center; gap:10px; padding:8px 14px 8px 22px; border-bottom:1px solid var(--line)}
+.term-title{font:400 12.5px var(--sans); color:var(--muted); flex:1}
+.term-bar button,.nav button{font:500 12.5px var(--sans); height:26px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--ink); cursor:pointer}
+.term-bar button[aria-expanded="true"]{background:var(--well)}
+.term-bar button:hover,.nav button:hover{border-color:var(--ink)}
+pre{margin:0; padding:16px 22px 18px; overflow-x:auto; font:400 13px/1.65 var(--mono); color:var(--ink)}
+
+/* the map: model chips in layers, columns unfold under a chip */
+.map .board-inner{gap:48px}
+.map .lvl{min-width:150px}
+.mdl{position:relative; z-index:1; display:inline-flex; align-items:baseline; gap:7px; align-self:flex-start; max-width:100%; font:400 13px/1 var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:7px 10px; cursor:pointer; text-align:left; transition:opacity .18s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.mdl small{font:400 11.5px/1 var(--sans); color:var(--faint)}
+.mdl:hover{border-color:var(--ink)}
+.mdl.src{background:var(--well); border-style:dashed}
+.mdl.bi{background:var(--ink); color:#fff; border-color:var(--ink)}
+.mdl.bi small{color:rgba(255,255,255,.62)}
+.mdl.r{border-style:dashed; border-color:var(--review); background:var(--review-tint)}
+.mdl[aria-expanded="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
+.map.focus .mdl:not(.on){opacity:.3}
+.map.focus .mdl:not(.on)+.cols{opacity:.3}
+.map.focus .wires path:not(.on){opacity:.15}
+.map.filter .mdl:not(.hit){opacity:.3}
+.map.filter .mdl:not(.hit)+.cols{opacity:.3}
+.cols{transition:opacity .18s var(--ease)}
+.wires path.on{stroke:var(--accent); stroke-width:1.5}
+.cols{display:flex; flex-direction:column; gap:5px; margin:0 0 6px 10px; padding-left:10px; border-left:1px solid var(--line)}
+.cols .node{cursor:pointer}
+.cols .node:hover{border-color:var(--accent); color:var(--accent-strong)}
+.more-chips{font:500 12.5px var(--sans); color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; text-align:left}
+.more-chips:hover{text-decoration:underline}
+
+.ladder{margin:26px 0 0; display:grid; grid-template-columns:max-content 1fr; gap:12px 20px; align-items:baseline}
+.ladder p{display:contents; margin:0}
+.ladder .rung{font:600 13px var(--sans); color:var(--ink)}
+.ladder p > span:not(.rung){font-size:14px; color:var(--muted); line-height:1.55}
+.ladder b{color:var(--ink); font-weight:500}
+.ladder .more{font:500 12.5px var(--sans); color:var(--accent); background:none; border:0; padding:0 2px; cursor:pointer; margin-left:6px}
+.ladder .more:hover{text-decoration:underline}
+.ladder .detail{display:block; margin-top:4px; font-size:13.5px}
+.ladder code{font:400 12.5px var(--mono); color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:2px 6px; white-space:nowrap}
+.foot{margin:28px 0 0; display:flex; flex-wrap:wrap; gap:4px 18px; font:400 12.5px var(--sans); color:var(--faint)}
+.foot > span{position:relative}
+.foot > span + span::before{content:""; position:absolute; left:-10px; top:.3em; height:.9em; border-left:1px solid var(--line-strong)}
+:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r)}
+@media (prefers-reduced-motion: no-preference){
+  .node.src::before,.node.src::after{animation:settle .5s var(--ease) both}
+  .node.src::after{animation-delay:.08s}
+  @keyframes settle{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
+  .node{opacity:0; transform:translateX(-4px); transition:opacity .22s var(--ease), transform .22s var(--ease)}
+  .node.in{opacity:1; transform:none}
+  .wires path{transition:stroke-dashoffset .3s var(--ease)}
+}
+@media (prefers-reduced-motion: reduce){ .node{opacity:1} }
+@media (max-width:680px){
+  .wrap{padding:28px 18px 56px}
+  h1{font-size:23px}
+  h1 code{font-size:20px}
+  .board-inner{flex-direction:column; gap:22px; min-width:0}
+  .wires{display:none}
+  .lvl{min-width:0}
+  .lvl+.lvl::before{content:'↓'; color:var(--faint); font-size:14px; margin-top:-14px}
+  .hint{margin-left:0; flex-basis:100%}
+  .ladder{grid-template-columns:1fr; gap:4px 0}
+  .ladder .rung{margin-top:10px}
+}