:root { --bg:#111418; --fg:#e6e8eb; --mut:#8b949e; --acc:#6cb6ff; --panel:#1a1f26; --line:#30363d; }
  @media (prefers-color-scheme: light) { :root { --bg:#f6f7f9; --fg:#1b1f24; --mut:#59636e; --acc:#0969da; --panel:#fff; --line:#d0d7de; } }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--fg); font:14px system-ui,sans-serif; display:flex; flex-direction:column; height:100vh; height:100dvh; }
  header, footer { padding:8px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  main { flex:1; display:flex; min-height:0; }
  canvas { flex:1; min-width:0; width:100%; height:100%; cursor:grab; touch-action:none; display:block; }
  aside { width:280px; padding:12px; background:var(--panel); border-left:1px solid var(--line); overflow:auto; font-size:13px; }
  aside h2 { font-size:14px; margin:0 0 8px; }
  aside dl { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0 0 10px; }
  aside dt { color:var(--mut); } aside dd { margin:0; }
  aside .link { color:var(--acc); cursor:pointer; text-decoration:underline; background:none; border:0; padding:0; font:inherit; }
  .bar { display:flex; height:10px; border-radius:3px; overflow:hidden; margin:4px 0; }
  input[type=range] { flex:1; min-width:120px; }
  button, select { background:transparent; color:var(--fg); border:1px solid var(--mut); border-radius:6px; padding:6px 10px; font:inherit; min-height:34px; }
  label.chk { display:flex; gap:4px; align-items:center; }
  #info { color:var(--mut); }
  #legend { display:flex; gap:8px; align-items:center; color:var(--mut); }
  #legend canvas { width:160px; height:10px; flex:none; cursor:default; border-radius:3px; }
  @media (max-width:700px) { main { flex-direction:column; } aside { width:auto; max-height:34%; border-left:0; border-top:1px solid var(--line); } }
  .hint { color:var(--mut); }
  .seg { display:block; }